Angular Material Tabs: Content outside mat-tab

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?