CODEWITHSUNDEEP
angularangular-material
Hypenate
Hypenate

Reputation: 2064

Add custom Component in mat-tab-group

I have create a mat-tab that I reuse a lot in my different tab-groups.
Since I do not repeat code, I created a component mat-tab-foo.
It contains the following HTML:

 <mat-tab label="Foo">
   <p>Bar</p>
 </mat-tab>

I tried using it in my mat-tab-group like so:

 <mat-tab-group>
   <mat-tab-foo></mat-tab-foo>
 </mat-tab-group>

But the tab is never rendered, does anyone know how to render mat-tab-foo inside the mat-tab-group?

A Stackblitz example can be found here.

Upvotes: 4

Views: 1629

Answers (1)

Char Line
Char Line

Reputation: 11

I think that post can help you, look the second answer too:

Angular Material Tabs not working with wrapper component

Basically, you have to wrapper the mat-tab-group in another component and add the tabs in the .ts. It worked for me

Upvotes: 1

Related Questions