title: Angular Material Tabs: Content outside mat-tab
body: <p>I need to display the tabs <code>&lt;mat-tab-group&gt;&lt;mat-tab&gt;</code> in the <code>&lt;mat-toolbar&gt;</code> in my header component, those tabs needs to change the content in other components.</p>
  
  <pre><code>// Component 1
  &lt;mat-toolbar-row&gt;
    &lt;mat-tab-group&gt;
      &lt;mat-tab label="First"&gt;&lt;/mat-tab&gt;
      &lt;mat-tab label="Second"&gt;&lt;/mat-tab&gt;
      &lt;mat-tab label="Third"&gt;&lt;/mat-tab&gt;
    &lt;/mat-tab-group&gt;
  &lt;/mat-toolbar-row&gt;
  
  ......
  
  // Component 2
  &lt;section&gt;
    // Content of Tab 1
  &lt;/section&gt;
  &lt;section&gt;
    // Content of Tab 2
  &lt;/section&gt;
  &lt;section&gt;
    // Content of Tab 3
  &lt;/section&gt;
  </code></pre>
  
  <p>Or should I just create my own component and style it the same way instead?</p>