title: Two ngcontent on a Angular component
body: <p>I created a Tabs component (<a href="https://stackblitz.com/edit/angulartabs" rel="nofollow noreferrer">https://stackblitz.com/edit/angulartabs</a>) used as follows:</p>
  
  <pre><code>&lt;tabs&gt;
    &lt;tab title="tab 1"&gt;Content 1&lt;/tab&gt;
    &lt;tab title="tab 2" active="true"&gt;Content 2&lt;/tab&gt;
  &lt;/tabs&gt;
  </code></pre>
  
  <p>The Tabs Component HTML is as follows:</p>
  
  <pre><code>&lt;div class="head"&gt;
    &lt;ul class="tabs"&gt;
      &lt;li *ngFor="let tab of tabs" (click)="select(tab)" class="tab" [class.active]="tab.active"&gt;
        &lt;a&gt;{{ tab.title }}&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
    &lt;div class="toolbar"&gt;Toolbar&lt;/div&gt;
  &lt;/div&gt;
  &lt;ng-content&gt;&lt;/ng-content&gt;
  </code></pre>
  
  <p>This is working but I also need the toolbar markup to change when selected tab changes.</p>
  
  <p>So for each tab I need to define its content and its toolbar.</p>
  
  <p>How to do this?</p>
  
  <p><strong>Update</strong></p>
  
  <p>Maybe the HTML markup when using the Tabs should be:</p>
  
  <pre><code>&lt;tabs&gt;
    &lt;tab title="tab 1"&gt;
      &lt;toolbar&gt;Tab 1 toolbar&lt;/toolbar&gt;
      Content 1
    &lt;/tab&gt;
    &lt;tab title="tab 2" active="true"&gt;
      Content 2
    &lt;/tab&gt;
  &lt;/tabs&gt;
  </code></pre>
  
  <p>In tab 2 there is no toolbar which is also an option ...</p>
  
  <p>Does content also needs to be wrapped in a tag?</p>
  
  <pre><code>  &lt;tab title="tab 1"&gt;
      &lt;toolbar&gt;Tab 1 toolbar&lt;/toolbar&gt;
      &lt;content&gt;Content 1&lt;/content&gt;
    &lt;/tab&gt;
  </code></pre>