Components: tabs: nested mat-tab-group with custom label template puts label on parent tab too

[craigsh]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Should be able to use a custom tab label template in a sub tab but not in a parent tab.

What is the current behavior?

Having a mat-tab-group within a mat-tab-group with the child mat-tab-group having mat-tab items with a custom tab template (using ng-template) puts the custom tab content on the parent tab too.

What are the steps to reproduce?

StackBlitz repro: https://stackblitz.com/edit/angular-7njwul

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

Not possible to use a custom tab label template on child tabs without breaking the parent tabs.

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

Browsers - all
Material: 5.2.4 (+?)
Angular 5

Is there anything else we should know?

Nope

[taokakao]

According to material guidelines (https://material.io/archive/guidelines/components/tabs.html#tabs-usage) tabs should not be nested.

[craigsh]

Agreed that's what the guidelines say, but I'd point out it does say "should" and not "must". It would be nice to see this fixed.

[julianobrasil]

Fortunately, if you use a custom label in both parent and child, it works right. Until it's fixed, it's an acceptable workaround.

[craigsh]

@julianobrasil Ah, thanks for the tip Juliano :)

[jelbourn]

Confirmed that this is still a bug in v9. Relatively low priority since nesting tabs is discouraged by the spec.

[Splaktar]

From the tabs placement docs in the 2018+ Material Design spec:

Caution Avoid nesting a tab within another tab.

[Splaktar]

Here's an updated demo of this issue.

[Splaktar]

This demo shows that this is still a problem with the MDC-based tabs.