Как отображать содержимое дочернего компонента в Angular?

У меня есть 3 компонента: вкладки, вкладка и панель инструментов, и я использую их следующим образом: Онлайн-пример :

<tabs>
  <tab title="tab 1" active="true">
    <toolbar>Toolbar 1</toolbar>
    Content 1
  </tab>
  <tab title="tab 2">
     <toolbar>Toolbar 2</toolbar>
     Content 2
  </tab>
</tabs>

Таким образом, у вкладок много вкладок, а у вкладок только одна панель инструментов.

Шаблон вкладок выглядит следующим образом:

<div class="head">
  <ul class="tabs">
    <li *ngFor="let tab of tabs" (click)="select(tab)" class="tab" [class.active]="tab.active">
      <a>{{ tab.title }}</a>
    </li>
  </ul>

  <div class="toolbar">Toolbar of Active Tab</div>

</div>
<ng-content></ng-content>

Как отображать панель инструментов текущей активной вкладки в:

<div class="toolbar">Toolbar of Active Tab</div>

Код каждого компонента:

export class TabsComponent implements AfterContentInit {    
  @ContentChildren(TabComponent) tabs: QueryList<TabComponent>;    
  select(tab: TabComponent) {
    this.tabs.toArray().forEach(tab => { 
      tab.active = false; 
    });
    tab.active = true;
  }
  ngAfterContentInit() {
    let actives = this.tabs.filter((tab) => tab.active);
    if(actives.length === 0) 
      this.select(this.tabs.first);
  }
}

export class TabComponent {
  @Input() active: boolean;
  @Input() title: string;
  @ContentChildren(ToolbarComponent) toolbar: ToolbarComponent;
}

export class ToolbarComponent { }