angular - Angular2: implementing the tabs -

i want implement tabs on page , therefore went through tutorial

https://dzone.com/articles/learning-angular-2-creating-a-tabs-component somehow not working me plunker: http://plnkr.co/edit/jwbb7jd8kdxmndgbz4zn?p=preview

import { component, oninit,input } '@angular/core';  @component({   selector: 'tab',   template: '<div [hidden]="!active" class="pane">   <ng-content></ng-content> </div>',   styleurls: ['./tab.component.css'] }) export class tab{   @input('tabtitle') title: string;   @input() active = false;   } 

and tabs component:

  import { component, oninit,contentchildren,querylist ,aftercontentinit} '@angular/core';     import { tab } './tab.component.ts';      @component({       selector: 'tabs',       template: `<ul class="nav nav-tabs">       <li *ngfor="let tab of tabs" [hidden]='true' (click)="selecttab(tab)" [class.active]="tab.active">         <a>{{tab.title}}</a>       </li>     </ul>     <ng-content></ng-content>`,       styleurls: ['./tabs.component.css']     })     export class tabs implements aftercontentinit{       @contentchildren(tab) tabs: querylist<tab>;         ngaftercontentinit() {       let activetabs = this.tabs.filter((tab)=>tab.active);        if(activetabs.length === 0) {         this.selecttab(this.tabs.first);       }     }      selecttab(tab: tab){       this.tabs.toarray().foreach(tab => tab.active = false);       tab.active = true;     }     } 

please note : first time working plunker, please excuse me. hope can me .

thanks.

i have easy solution home.component.ts

<ul class="tabs"> <li [ngclass]=" {'active-tab': tab==1 }"><a (click)=" tab = 1 " href="javascript:void(0)">tab 1</a></li> <li [ngclass]=" {'active-tab': tab==2 }"><a (click)=" tab = 2 " href="javascript:void(0)">tab 2</a></li> <li [ngclass]=" {'active-tab': tab==3 }"><a (click)=" tab = 3 " href="javascript:void(0)">tab 3</a></li>df </ul>  <div class="tab-panel" id="tabpanel1" *ngif="tab==1">     abc tab 1 </div> <div class="tab-panel" id="tabpanel2" *ngif="tab==2">     abc tab 2 </div> <div class="tab-panel" id="tabpanel3" *ngif="tab==3">     abc tab 3 </div> 

this easy without using third party component if want active tab on page load assign value "tab" variable

home.component.ts import { component, oninit } '@angular/core';  @component({   selector: 'app-home',   templateurl: './home.component.html',   styleurls: ['./home.component.css'] }) export class homecomponent implements oninit {   tab: number = 3;   constructor() { }    ngoninit() {   }  }