CODEWITHSUNDEEP
htmlcssangularangular-materialmat-table
Anil Kumar Reddy A
Anil Kumar Reddy A

Reputation: 648

Expand and collapse icons for mat table with accordion - Angular

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.

Upvotes: 1

Views: 5200

Answers (1)

Łukasz Nojek
Łukasz Nojek

Reputation: 1641

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

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

Upvotes: 2

Related Questions