Toggle image not working properly for mat table
0
i am using Mat table and detailExpand expand for toggle details.A plus and minus image i have put to identify toggle up and down.It is working for me while clicking a table row but image not changing for another table rows
this is my code
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8 mat_datatable" matSort matSortActive="total_click" matSortDirection="desc" multiTemplateDataRows matSortDisableClear>
<ng-container matColumnDef="campaign_name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Campaign </th>
<td mat-cell *matCellDef="let element" style="text-align: left;">
<a href="javascript:void(0)"
(click)="publisherspiltup(element)"
[ngClass]="element.split_toggle ? 'toggle_plus': 'toggle_minus'"
></a>
Aand here is my .ts file
publisherspiltup(ele,that) {
//console.log(that);
ele.split_toggle = !ele.split_toggle;
}
angular angular6 mat-table
edited Nov 23 '18 at 13:40
dince12
606318
asked Nov 23 '18 at 10:31
Sandeep NambiarSandeep Nambiar
6551724
add a comment |
0
i am using Mat table and detailExpand expand for toggle details.A plus and minus image i have put to identify toggle up and down.It is working for me while clicking a table row but image not changing for another table rows
this is my code
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8 mat_datatable" matSort matSortActive="total_click" matSortDirection="desc" multiTemplateDataRows matSortDisableClear>
<ng-container matColumnDef="campaign_name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Campaign </th>
<td mat-cell *matCellDef="let element" style="text-align: left;">
<a href="javascript:void(0)"
(click)="publisherspiltup(element)"
[ngClass]="element.split_toggle ? 'toggle_plus': 'toggle_minus'"
></a>
Aand here is my .ts file
publisherspiltup(ele,that) {
//console.log(that);
ele.split_toggle = !ele.split_toggle;
}
angular angular6 mat-table
edited Nov 23 '18 at 13:40
dince12
606318
asked Nov 23 '18 at 10:31
Sandeep NambiarSandeep Nambiar
6551724
1
It would be great if you could provide a Minimal, Complete, and Verifiable example. You can use StackBlitz to create one.
– SiddAjmera
Nov 23 '18 at 10:54
add a comment |
0
0
0
i am using Mat table and detailExpand expand for toggle details.A plus and minus image i have put to identify toggle up and down.It is working for me while clicking a table row but image not changing for another table rows
this is my code
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8 mat_datatable" matSort matSortActive="total_click" matSortDirection="desc" multiTemplateDataRows matSortDisableClear>
<ng-container matColumnDef="campaign_name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Campaign </th>
<td mat-cell *matCellDef="let element" style="text-align: left;">
<a href="javascript:void(0)"
(click)="publisherspiltup(element)"
[ngClass]="element.split_toggle ? 'toggle_plus': 'toggle_minus'"
></a>
Aand here is my .ts file
publisherspiltup(ele,that) {
//console.log(that);
ele.split_toggle = !ele.split_toggle;
}
angular angular6 mat-table
edited Nov 23 '18 at 13:40
dince12
606318
asked Nov 23 '18 at 10:31
Sandeep NambiarSandeep Nambiar
6551724
i am using Mat table and detailExpand expand for toggle details.A plus and minus image i have put to identify toggle up and down.It is working for me while clicking a table row but image not changing for another table rows
this is my code
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8 mat_datatable" matSort matSortActive="total_click" matSortDirection="desc" multiTemplateDataRows matSortDisableClear>
<ng-container matColumnDef="campaign_name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Campaign </th>
<td mat-cell *matCellDef="let element" style="text-align: left;">
<a href="javascript:void(0)"
(click)="publisherspiltup(element)"
[ngClass]="element.split_toggle ? 'toggle_plus': 'toggle_minus'"
></a>
Aand here is my .ts file
publisherspiltup(ele,that) {
//console.log(that);
ele.split_toggle = !ele.split_toggle;
}
angular angular6 mat-table
angular angular6 mat-table
edited Nov 23 '18 at 13:40
dince12
606318
asked Nov 23 '18 at 10:31
Sandeep NambiarSandeep Nambiar
6551724
edited Nov 23 '18 at 13:40
dince12
606318
asked Nov 23 '18 at 10:31
Sandeep NambiarSandeep Nambiar
6551724
edited Nov 23 '18 at 13:40
dince12
606318
edited Nov 23 '18 at 13:40
dince12
606318
edited Nov 23 '18 at 13:40
dince12
606318
606318
asked Nov 23 '18 at 10:31
Sandeep NambiarSandeep Nambiar
6551724
asked Nov 23 '18 at 10:31
Sandeep NambiarSandeep Nambiar
6551724
asked Nov 23 '18 at 10:31
Sandeep NambiarSandeep Nambiar
6551724
6551724
1
It would be great if you could provide a Minimal, Complete, and Verifiable example. You can use StackBlitz to create one.
– SiddAjmera
Nov 23 '18 at 10:54
add a comment |
1
It would be great if you could provide a Minimal, Complete, and Verifiable example. You can use StackBlitz to create one.
– SiddAjmera
Nov 23 '18 at 10:54
1
1
It would be great if you could provide a Minimal, Complete, and Verifiable example. You can use StackBlitz to create one.
– SiddAjmera
Nov 23 '18 at 10:54
It would be great if you could provide a Minimal, Complete, and Verifiable example. You can use StackBlitz to create one.
– SiddAjmera
Nov 23 '18 at 10:54
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53444981%2ftoggle-image-not-working-properly-for-mat-table%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53444981%2ftoggle-image-not-working-properly-for-mat-table%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
It would be great if you could provide a Minimal, Complete, and Verifiable example. You can use StackBlitz to create one.
– SiddAjmera
Nov 23 '18 at 10:54