Mat-table with multiTemplateDataRows is not working when this table is added in mat-tab.
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
#### What is the expected behavior?
it should work fine with/without mat-tab
#### What is the current behavior?
Empty rows are created and displaying
#### What are the steps to reproduce?
Providing a StackBlitz reproduction is the *best* way to share your issue.
StackBlitz starter: https://goo.gl/wwnhMV
Step 1: Go to "https://stackblitz.com/edit/angular-material-expandable-table-rows?file=app%2Ftable%2Ftable.component.ts"
Step 2: Add Mat-tab module in app.module.ts "import {MatTabsModule} from '@angular/material/tabs';"
Step 3: Add the following code at the top, in table.componenet.html
"
Content 1
Content 2
Content 3
"
Step 4: Cut the rest of the code and paste it inside the tab replacing "Content 1"
Step 5: run the code.
Step 6: move to next tab and come back to first tab, the content will be displaying by default. PFA screenshots


#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
#### Is there anything else we should know?
Contributor guide
Research direction
Start with the StackBlitz reproduction and compare table.component.html and table.component.ts before and after the table is placed inside mat-tab. Check app.module.ts for MatTabsModule, then reproduce the empty rows by switching tabs. Done means the multiTemplateDataRows table displays its content correctly after leaving and returning to the first tab.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100