Angular Material Tabs: Content outside mat-tab

Question

I need to display the tabs <mat-tab-group><mat-tab> in the <mat-toolbar> in my header component, those tabs needs to change the content in other components.

// Component 1
<mat-toolbar-row>
  <mat-tab-group>
    <mat-tab label="First"></mat-tab>
    <mat-tab label="Second"></mat-tab>
    <mat-tab label="Third"></mat-tab>
  </mat-tab-group>
</mat-toolbar-row>

......

// Component 2
<section>
  // Content of Tab 1
</section>
<section>
  // Content of Tab 2
</section>
<section>
  // Content of Tab 3
</section>

Or should I just create my own component and style it the same way instead?

Answer 1

Try this

<mat-tab-group>
  <mat-tab label="First" #firstTab> </mat-tab>
  <mat-tab label="Second" #secondTab></mat-tab>
</mat-tab-group>
<div [ngStyle]="{ display: !firstTab.isActive ? 'none' : null }">First</div>
<div [ngStyle]="{ display: !secondTab.isActive ? 'none' : null }">Second</div>