Error creating a custom component using TAB of Angular Material 9

Question

I'm trying to create a TAB custom component using Angular Material 9.

This is the code to create a TAB using Angular Material:

 <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 have created two new components:

my-tab with the following HTML:

 <mat-tab-group>
  <ng-container></ng-container>
</mat-tab-group>

my-tab-item with the following HTML

 <mat-tab label="title">    
     <ng-container></ng-container>
   </mat-tab>

There is a string parameter for the text of the TAB.

The problem is that TABs are not rendered.

<app-my-tab>
  <app-my-tab-item title="Label 1">Content 1</app-my-tab-item>
  <app-my-tab-item title="Label 2">Content 2</app-my-tab-item>
  <app-my-tab-item title="Label 3">Content 3</app-my-tab-item>
</app-my-tab>

I have created a stackblitz with the example.

https://stackblitz.com/edit/angular-v9zpgf

Thanks for your help

Answer 1

ng-container does not render anything and is just used for selectively grouping elements.

In my-tab.component.html just put the code:

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

In tab-group-basic-example.html remove the contents of app-my-tab. Just put:

<app-my-tab></app-my-tab>

And you should see the tabs rendered by you component.

Answer 2

I believe what you are trying to do is Content Projection. Here is what you need to do: The HTML for your custom tab group(app-my-tab) should be this:

<mat-tab-group>
<ng-content select="app-my-tab-item"></ng-content>
<mat-tab-group>

And the HTML for your app-my-tab-item should be:

<mat-tab>
<ng-content></ng-content>
<mat-tab>

If you need to pass some custom input/output elements, you may do so appropriately.