angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.28k stars 6.71k forks source link

Tab of tab group inside another tab group does not draw the ink bar when selected using selectedIndex #6478

Open gtranter opened 7 years ago

gtranter commented 7 years ago

Bug, feature request, or proposal:

Bug.

What is the expected behavior?

A tab group with a valid selectedIndex value set should make that tab active when the tab group is made visible.

What is the current behavior?

If the tab group is inside a tab of another (outer) group, the tab is selected but does not appear active - the tab label underline is not drawn.

What are the steps to reproduce?

Plunker template: http://run.plnkr.co/plunks/f26CWDF1Akfij0FQOyz4/ Click on the second outer tab "Tab with Tab Group" - the content of the single tab of the inner tab group is shown but the tab label ink bar is not drawn (in the DOM, its width is zero).

What is the use-case or motivation for changing an existing behavior?

Doesn't currently do what it should do.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

2.0.0-beta.8

Is there anything else we should know?

Tested in Chrome.

amcdnl commented 6 years ago

Related to https://github.com/angular/material2/issues/1854

amcdnl commented 6 years ago

This can be resolved by lazy loaded tabs via https://github.com/angular/material2/pull/6832

drakenfly commented 6 years ago

I think this is the same issue as #7006

luigi1610 commented 3 years ago

This can be resolved by lazy loaded tabs via #6832

The lazy load cannot work if you full the content of tab with rxjs observable subject