bug(Mat-Tabs): Mat-tabs on mat-dialog not working when selectedIndex change asynchronously

[mdrafee03]

Reproduction

https://stackblitz.com/edit/mat-tabs-on-mat-dialog-problem

Steps to reproduce:

1. Use mat-dialog for dialog
2. Use mat-tabs for multiple tabs
3. Use selectedIndex to select tabs dynamically
4. Initialize selectedIndex value
5. Change selectedIndex asynchronously

Expected Behavior

I will initially see the tab of the index that I initialize first. But when I change the selectedIndex, it will switch to the new tab of that index.

Actual Behavior

Asynchronously changed tabs contents will go blank. The tab contains blank content. But if I add 500ms with setTimeout it works. But without this setTimeout, it dosn't work

Environment

• Angular: 8 or 9
• CDK/Material: 8, 10
• Chrome, Firefox
• Ubuntu, Windows

[andrewseguin]

Seems like a legit bug - it's not clear why the rendering is doing that. Will need to dive deeper. I tried seeing if animationDuration=0 helped, but the issue still was present

[emma-github-acct]

Was this ever resolved? I'm still seeing this issue

[VirtusB]

Was this ever resolved? I'm still seeing this issue

Don't think so, I also just encountered this issue

[emma-github-acct]

@mdrafee03 did you ever find a solution to this issue?

[VirtusB]

@mdrafee03 did you ever find a solution to this issue?

This worked for me and fit my project: https://stackoverflow.com/a/62661533/6370521

[emma-github-acct]

@mdrafee03 did you ever find a solution to this issue?

This worked for me and fit my project: https://stackoverflow.com/a/62661533/6370521

I'm using an automation test tool that selects the second tab once the dialog is open. Since this is a quick, automated selection, it causes this error where nothing in the second tab renders. The 2 working solutions I found are:

1. Use a setTimeout() to wait for the tab content to render, then change the this.selectedIndex value.
2. Use the <mat-tab-group *ngIf="selectedIndex!=undefined" [selectedIndex]="selectedIndex"> solution. This also requires the this.selectedIndex to be initialized as undefined, but then assigned this.selectedIndex = 0 in the ngAfterViewInit() lifecylce callback. But this causes a Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError:

[IslombekHasan]

The issue is still present…

[CharlieGreenman]

Just bumping this. I am still having this issue in Angular 17.2.0. It causes no tab to be selected on initial page load. From a business logic perspective this means I have two choices:

1. Find a way to hack it and make it work
2. Decide not to use mat tabs

So I think from a priority perspective, this is a higher priority than the issue leads onto