I am implementing mat-table.
Where I want to change the mat-icon of a button based on click event only for single row in the table. I am able to change the icon but not able to do it for only single row.
Any suggestions on how I can fix that?
My stackblitz example: Button-icon change
You need to have a property that handle value for the individual row. I have added property on array object and setting that expand and collapse.
Here is the working code : https://stackblitz.com/edit/angular-ugxyhc-cbbtmz?file=src%2Fapp%2Ftable-column-styling-example.html
Here is a working fiddle of this: https://stackblitz.com/edit/angular-ugxyhc-ri2neq?file=src%2Fapp%2Ftable-column-styling-example.ts
All you have to do is to expand the object called PeriodicElement to also contain whether he is expanded or not. Once you do that you can ask if a certain element in a certain row is expanded and render accordingly.
export interface PeriodicElement {
name: string;
position: number;
weight: number;
symbol: string;
isExpanded?: boolean; // Keep track of expanded state
}
expand(element: PeriodicElement, expanded: boolean) {
element.isExpanded = !element.isExpanded;
}
And the HTML:
<td mat-cell *matCellDef="let element">
<button (click)="expand(element, isExpanded)">
<mat-icon *ngIf="!element.isExpanded">expand_more</mat-icon>
<mat-icon *ngIf="element.isExpanded">chevron_right</mat-icon>
</button>
</td>