tabs.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'tabs',
  template: `
    <div class="tabbable">
      <ul class="nav nav-tabs">
        <li *ngFor="let pane of panes" [ngClass]="{active:pane.selected}">
          <a href="#" (click)="select(pane)">
            {{pane.title}}
          </a>
        </li>
      </ul>
      <div class="tab-content">
        <ng-content></ng-content>
      </div>
    </div>
  `,
  styleUrls: ['./tabs.component.css']
})
export class TabsComponent implements OnInit {
  constructor() { }
  panes = []
  select(pane) {
    this.panes.forEach((p) => {
      p.selected = false;
    });
    pane.selected = true;
  };
  addPane(pane) {
    if (this.panes.length === 0) {
      this.select(pane);
    }
    this.panes.push(pane);
  };
  ngOnInit() {
  }
}