Tabs component

tabs.component.ts

import {Component, OnInit} from 'angular2/core';
import {Router, RouterOutlet} from 'angular2/router';
import {Tab} from './tab';
import {TabService} from './tab.service';
import {TabLinkComponent} from './tab-link.component';
import {TabContentComponent} from './tab-content.component';
import {TabFormComponent} from './tab-form.component';

@Component({
  selector: 'tabs',
  template: `<div>
    <ul class="nav nav-tabs" role="tablist">
      <li role="presentation" *ngFor="#tab of tabs" [tab]="tab" [class.active]="tab.active" tabLink></li>
    </ul>
    <div role="tabpanel" class="tab-content tab-pane">
      <router-outlet></router-outlet>
    </div>
  </div>`,
  directives: [RouterOutlet, TabLinkComponent],
  providers: [TabService]
})
export class TabsComponent implements OnInit {
  
  tab: Tab[];
  constructor(private _router: Router, private _tabService: TabService) {
  }
  
  ngOnInit() {
    this._tabService.getTabs().then((tabs: Tab[]) => {
      this.tabs = tabs;
    });
    
    this._router.config( [{path: '/tabs/:id', name: 'Tab', component: TabContentComponent}] );
    this._router.navigate(['Tab', {id: 1}]);
  }
}