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.

[khalid-elabbadi]

me too can make it work. i got this:
ERROR Error: Uncaught (in promise): Error: Template parse errors:
Unexpected closing tag "mat-tab". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags ("


[ERROR ->]

"): ng:///UsersModule/UsersComponent.html@266:8 Unexpected closing tag "mat-tab-group". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (" [ERROR ->] "): ng:///UsersModule/UsersComponent.html@267:4 Error: Template parse errors: Unexpected closing tag "mat-tab". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (" [ERROR ->]

[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]

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