Components: tabs: nested tabs do not accurately position the ink bar

[Robouste]

Bug, feature request, or proposal:

Bug
This is a bit complicated to explain for a non native english speaker but you can check the plunkr below.

What is the expected behavior?

Nested tabs should always have its first tab active

What is the current behavior?

It works for the first nested tab but not the others

What are the steps to reproduce?

http://plnkr.co/edit/r2QxMeW0WkMAgo4zpwqD?p=preview

In the first tab group, if you click on Main Tab 2, the Nested Tab 1 will not be active.
In the second tab group, Nested Tab 1 is active because it's inside the first Main Tab

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

Being able to nest tabs group

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

All (tried on different projects)

Is there anything else we should know?

Yes, I love Material Design

[andrewseguin]

The issue here is not that the tabs aren't actived, but that the ink bar is not properly positioned.

Root Cause: The nested tabs are initialized outside of the DOM. When the nested tabs tell the ink bar to position itself, the ink bar looks for the active tab's label position and width, which is non-existent at the time.

Workaround: Add the nested tabs once their host tab is activated. See this plunker for an example: http://plnkr.co/edit/2RoXVgL6dUY8xjcsa28n?p=preview

We'll need to consider the implications of not adding tab content to the DOM immediately once the tab group is initalized. The reason we only add the active tab right now is that we optimize performance, but we don't have numbers to compare the extent of the benefits.

[amcdnl]

This is a side effect of this issue: https://github.com/angular/material2/issues/1854

[matze1234]

nested mat-tab-groups with dynamicHeights works with this workaround using *ngFor :

<mat-tab-group [dynamicHeight]="true">
    <mat-tab #tab>
            <mat-tab-group *ngFor="let workaround of [tab.isActive]" [dynamicHeight]="true">
            ...

*ngFor causes the inner element to re-render when active.

[Splaktar]

From the tabs placement docs:

Caution Avoid nesting a tab within another tab.

[Splaktar]

Here's an updated demo that shows this is still reproducible.

[Splaktar]

This will be fixed with the new MDC-based tabs (currently in @angular/material-experimental): Demo