Expand and collapse icons for mat table with accordion - Angular

0
votes

I'm using a generic component for displaying table with accordion. I somehow achieved the functionality which is working fine. But I'm facing issue with expand and collapse icons. when I click on a particular row I want only that row icon to be changed. But all the icons in all rows are changed.

    <mat-icon *ngIf="col.columnDef == ' ' && !expanded">
      {{ expandedElement ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}
    </mat-icon>

Stackblitz :https://stackblitz.com/edit/angular-yr45pl

Thanks in Advance.

1
htmlcssangularangular-materialmat-table

1 Answers

1
votes

Please fix your line 24 in table.component.html to:

{{ expandedElement !== row ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}