title: Nested Angular material tabs
body: <p>I have a requirement for adding dynamic tabs to some <code>User Preferences</code> screen.
  The main preference tab can be a static tab with static content, but the second tab should have nested <code>mat-tab</code> elements. </p>
  
  <p>These additional dynamic preferences come from the backend, which then allows me to use an <code>*ngFor</code> to render the extra tabs.</p>
  
  <p>Problem I'm seeing now is with the tab <code>labels</code>. The label text is taking its value from the first nested tab, and NOT from the <code>label</code> property I'm setting.</p>
  
  <p>Please see my example here on stackblitz - <a href="https://stackblitz.com/edit/mat-tabs-nested?embed=1&amp;file=app/tab-group-async-example.html" rel="nofollow noreferrer">https://stackblitz.com/edit/mat-tabs-nested?embed=1&amp;file=app/tab-group-async-example.html</a> </p>
  
  <p>A code snippet from the online project is:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;mat-tab-group&gt;
  
  ...
  
  &lt;mat-tab label="More Dynamic Preferences"&gt;
  
      &lt;!-- NESTED HERE --&gt;    
      &lt;mat-tab-group&gt;
        &lt;mat-tab *ngFor="let tab of asyncTabs | async"&gt;
          &lt;ng-template mat-tab-label&gt;{{tab.label}}&lt;/ng-template&gt;
          {{tab.content}}
        &lt;/mat-tab&gt;
      &lt;/mat-tab-group&gt;
  
    &lt;/mat-tab&gt;
    
  &lt;/mat-tab-group&gt;    </code></pre>
  </div>
  </div>
  </p>
  
  <p>If you click on "More Dynamic Preferences" tab, then the tab header text becomes "First". Same happens on the second tab, whose tab content I'm loading synchronous, as opposed to the async example. </p>