gistfile1.txt

import {Component, View, bootstrap, NgFor, NgIf, EventEmitter, Inject, forwardRef, Host } from 'angular2/angular2';
import {App} from './app'
@Component({
  selector: 'tabs',
})
@View({
  template: `
    <div class="tabs">
      <span class="tab" [class.selected]="tab.active" *ng-for="#tab of tabs" (click)="selectTab(tab)">
        {{tab.tabTitle}}
      </span>
      <span class="tab" style=" width: 100%; height: 0px; "> </span>
    </div>
    <content></content>
  `,
  directives: [NgFor, NgIf]
})
export class Tabs {
  tabs: Array<Tab>;
  app:App;
  constructor() {
    this.tabs = [];
  }

  selectTab(tab) {
    this.tabs.forEach((tab) => {
      tab.active = false;
    });
    tab.active = true;
  }

  addTab(tab: Tab) {
    if (this.tabs.length === 0) {
      tab.active = true;
    }
    this.tabs.push(tab);
  }
}

@Component({
  selector: 'tab',
  properties: ['tabTitle: tab-title']
})
@View({
  template: `
    <div [hidden]="!active">
      <ng-content></ng-content>
    </div>
  `
})
export class Tab {
  tabTitle: String;
  tabOptionsString: string;
  tabOptions: Array<Object>;
  constructor(@Host()  tabs:Tabs) {
    tabs.addTab(this);
  }
}