Components: mat-tab-group doesn't show styles for default tab selected

[ATakaSKY]

What is the current behavior?

There are three tabs:label1, label2 and label3. Inside each one of them there is another set of tabs. Now by default label1 shows the selected style as well as tab1 inside of it. Now once I click on another label like label 2 another set of tab loads but none of them shows tab label highlighted. Same goes for label3. I explicitly have to click on the tabs to see the styles.

What is the expected behavior?

Tab labels inside of label 2 and label 3 should also show highlighted tab labels.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-tyjslw?file=app/tabs-template-label-example.html

[MNorgren]

I am also having this issue. Seems like when visibility is toggled, the styles aren't being applied. Ive tried using a .hide class instead of *ngIf, but that doesnt fix it either. Any current workarounds that anyone knows of?

[amcdnl]

Explanation: Tab content is eagerly loaded by default. The tabs use dom size/position calculations for animations, since the tabs are loaded when the content is not visible it causes this side effect. This can be resolved by lazy loading the tabs which is capable as of: https://github.com/angular/material2/pull/8921

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}