Angular Mat-Tab, component for each tab

Question

My goal is to use a separate component for each tab as they will be very large for my project.

Instead of this:

<mat-tab-group>
  <mat-tab label="First"> Content 1 </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

I would like to use something like this:

<mat-tab-group>
  <app-first></app-first>
  <app-first></app-second>
  <app-first></app-third>
</mat-tab-group>

the Components have this html:

  <mat-tab label="First"> Content 1 </mat-tab>

But unfortunately it does not work as hoped. Maybe someone can explain me why please?

Answer 1

When you use the mat-tab inside child components, the native HTML created will be as follows:

<mat-tab-group>

  <app-first>
    <mat-tab> Content 1 </mat-tab>
  </app-first>

  <app-second>
    <mat-tab> Content 2 </mat-tab>
  </app-second>

  <app-third>
    <mat-tab> Content 3 </mat-tab>
  </app-third>

</mat-tab-group>

For angular material tabs, <app-first> is an unrecognized tag and hence it does not recognize it and hence does not look inside that tags as well and ignores it.

The right way to do it would be as follow:

<mat-tab-group>
  <mat-tab label="First"> <app-first></app-first> </mat-tab>
  <mat-tab label="Second"> <app-second></app-second> </mat-tab>
  <mat-tab label="Third"> <app-third></app-third> </mat-tab>
</mat-tab-group>

Then the individual code of tabs in components.

Component html:

Content of app first......

Content of app second......

Content of app third......