I have a table while using in mat-tab , expandable row are getting expanded on switching tabs
https://stackblitz.com/edit/angular-yjgkst here is the link
2
-
Possible duplicate of Mat expansion panel is not working properly in mat tableopal– leopal2019-07-24 08:52:42 +00:00Commented Jul 24, 2019 at 8:52
-
There is also an open github issue. Workaround can be found in both duplicate and github urls.leopal– leopal2019-07-24 08:53:41 +00:00Commented Jul 24, 2019 at 8:53
Add a comment
|
2 Answers
Use <ng-template matTabContent> in the <mat-tab> this is a solution, that changes the behaviour of each tab, with this template it lazy loads each tab, and whenever you click the tab, it does trigger ngOnInit...
I wanted to keep the behaviour I have, I just wanted to remove the bug of expanding rows whenever I click another tab..
It worked for me! :) You can just wrap up your element (which has the table) with a div, e.g.:
<mat-tab-group mat-align-tabs="start">
<mat-tab label="First"><div><app-table-element-selector></app-table-element-selector></div></mat-tab>
<mat-tab label="Second"><app-element2-selector></app-element2-selector></mat-tab>
<mat-tab label="Third"><app-element3-selector></app-element3-selector></mat-tab>
</mat-tab-group>
