Components: tabs: nested mat-tab with matTabContent directive does not work

[MurhafSousli]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Nested mat-tab with <ng-template matTabContent> to work

What is the current behavior?

Nested mat-tab with <ng-template matTabContent> do not work

What are the steps to reproduce?

https://stackblitz.com/edit/angular-material2-issue-aqmcu4?file=app/app.component.html

Use <ng-template matTabContent> in both the outer and the inner mat-tab and the issue will occur

<mat-tab-group>

  <mat-tab label="tab1">
    <ng-template matTabContent>

      <mat-tab-group>
        <mat-tab label="child tab1">
          <ng-template matTabContent>
            <p>Test Test Test Test Test Test Test Test Test Test Test Test</p>
          </ng-template>
        </mat-tab>

        <mat-tab label="child tab2">
          <ng-template matTabContent>
            <p>Test Test Test Test Test Test Test Test Test Test Test Test</p>
          </ng-template>
        </mat-tab>
      </mat-tab-group>

    </ng-template>
  </mat-tab>

  <mat-tab label="tab2">
    <ng-template matTabContent>
      <p>Test Test Test Test Test Test Test Test Test Test Test Test</p>
    </ng-template>
  </mat-tab>

  <mat-tab label="tab3">
    <ng-template matTabContent>
      <p>Test Test Test Test Test Test Test Test Test Test Test Test</p>
    </ng-template>
  </mat-tab>

</mat-tab-group>

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

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

Angular: 6.0.0
Material 6.3.0

Is there anything else we should know?

If <ng-template matTabContent> is removed from the inner mat-tab, it works

[robertmazzo]

I just tried adding nested mat-tab directives unsuccessfully. Any news on this ?
thanks.

[robertmazzo]

I got it working. See https://stackoverflow.com/questions/53194896/nested-angular-material-tabs/53195277#53195277

[EBMike]

@robertmazzo nesting a mat-tab-group inside a mat-tab still breaks it.... using your example, but updating the dynamic tabs with this will break

<mat-tab label="Dynamic Preferences">
    <ng-template matTabContent>
        <mat-tab-group>
            <mat-tab label="foo">
                    <ng-template matTabContent> // <-- this breaks it
                        bar
                    </ng-template>
            </mat-tab>
        </mat-tab-group>
    </ng-template>
</mat-tab>

[VenkateshVoona]

how to customize mat-label ? I tried like below snippet but didn't work

<mat-tab-group mat-stretch-tabs> <ng-template mat-tab-label> Tab 1 </ng-template> </mat-tab-group>

[AsimKarel]

Is there any update on this?
I am also facing the same issue.
matTabContent not working in nested tabs

[VishalCodingNinja]

Any Update.. Please help ...

[Splaktar]

From the tabs placement docs:

Caution Avoid nesting a tab within another tab.

[Splaktar]

This appears to be working with 11.0.3: demo

[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._}