Angular material expand one row at a time and close all other opened row

Question

Hi I have a Mat table with expand collapse option.

I have used exactly the below link for my reference.

Now the problem is I need to collapse all the previous opened row before opening the new row.

Can someone please help me in this.

Check this out : https://stackoverflow.com/questions/46123854/expandable-table-rows-in-angular-4-with-angular-material — Sangwin Gawande, Jan 30 '19 at 06:54
Thans @SangwinGawande, this is having a row which is hidden and gets expanded with the above row is clicked. but my problem is I need pagination also. In the above mentioned case, the pagination count is almost doubled :( — Mohan Kumar P R, Jan 30 '19 at 11:00

score 0 · Answer 1 · answered May 29 '20 at 15:57

this add a event emitter in cdk-detail-row-directive.ts in this way:

@Output() toggleChange = new EventEmitter(); // added

and when the toggle function is call yo add this:

this.toggleChange.emit(this); // added

See table.example.ts for more changes

1 Answers1