angularangular-materialmaterial-designmat-table

Expandable mat-table on mat-icon-button click


I implemented the following functionality (expand row details, when you click on the row it opens up its details) in my mat-table:

https://stackblitz.com/edit/angular-material2-issue-wervgn?file=app%2Ftable-basic-example.html

But this it is opening the detail div wherever I click on the row. I would like to expend/open up or collapse only on mat-icon expand_more/expand_less click.

I tried to call onToggleChange on the button click, yet it did not work.

If anyone could help me with that.

Thanks for now.


Solution

  • I edited your example and i think i achieved the expected behaviour. Basically i used the ViewChildren view query to get all detail-row directive instances an called the toggle function on icon click. Have a look: https://stackblitz.com/edit/angular-material2-issue-asu1zv?file=app%2Fcdk-detail-row.directive.ts