I've a angular material table which uses detailRow directive to insert a detail/sibling adjacent row to a table row.
I wanted to give it an appearance of as if the row is being expanded or collapsed, so I added couple of icons to it which are toggled on the click of cell containing them.
<mat-header-cell *matHeaderCellDef> Action </mat-header-cell>
<mat-cell *matCellDef="let element">
<button mat-icon-button color="primary" ?(click)="element[i] = !element[i]">
<mat-icon id="expand_more" ?#expand_more *ngIf="!element[i] " ?>expand_more</mat-icon>
<mat-icon id="expand_less" ?#expand_less *ngIf="element[i]?">expand_less</mat-icon>
</button>
</mat-cell>
However if the I leave the row expanded and paginate or do a sort the icons do not toggle because there's no way for them to be toggled.
I've tried hooking into the page
event or the sortChange
event but came up empty.
I'm aware that there's new way to do expand/collapse in angular material v7 which probably works well with pagination and sort but its gonna be a while before I upgrade, in the mean time does anyone have any ideas on how to solve this.
See Question&Answers more detail:os