CODEWITHSUNDEEP
angularangular-material
gmhk
gmhk

Reputation: 15940

Panel not hiding when clicked second time - Expansion Panel and Collapsable panel Implementation in angular mat table

I am implementing the Expansion panel and collapsable panel. Here is my code on stackblitz.

<tr mat-row *matRowDef="let element; columns: columnsToDisplay;"
    class="example-element-row"
    [class.example-expanded-row]="expandedElement === element"
    (click)="expandedElement = element">
</tr>

It is working except, when I click for first time, the expansion panel is opening and when I click second time, it should get collapsed, but it's not happening.

I found this example (see "Table with expandable rows" section) in official docs which works. A working example. Why is collapsible panel not working when clicked second time in my code?

Upvotes: 0

Views: 159

Answers (1)

Ajeet Shah
Ajeet Shah

Reputation: 19813

Issue:

(click)="expandedElement = element">

Solution:

You should set expandedElement to null when you click on the same element:

<tr mat-row *matRowDef="let element; columns: columnsToDisplay;"
  // ...
  (click)="expandedElement = expandedElement === element ? null : element">
</tr>

Upvotes: 1

Related Questions