import { Component , QueryList , AfterViewInit , ElementRef , Input , ContentChildren , ViewChild } from "@angular/core" ; declare var jQuery ; @ Component ( { selector : "sm-tab" , template : `
<div #tab>
    <ng-content></ng-content>
</div>  ` } ) export class SemanticTabComponent implements AfterViewInit { @ Input ( ) tab : number ; @ Input ( ) title : string ; @ Input ( ) active : boolean ; @ ViewChild ( "tab" ) tabEl : ElementRef ; ngAfterViewInit ( ) { this . tabEl . nativeElement . parentElement . classList . add ( "ui" , "tab" , "bottom" , "attached" , "segment" ) ; if ( this . active ) { this . tabEl . nativeElement . parentElement . classList . add ( "active" ) ; } } } TODO @ Component ( { selector : "sm-tabs" , template : `<div class="ui top attached tabular menu" #menu>
  <a class="item" [ngClass]="{'active': tab.active}" *ngFor="let tab of tabs">{{tab.title}}</a>
</div>
<ng-content></ng-content>
` } ) export class SemanticTabsComponent implements AfterViewInit { @ ContentChildren ( SemanticTabComponent ) tabs : QueryList < SemanticTabComponent > ; @ ViewChild ( "menu" ) menu : ElementRef ; @ Input ( "options" ) options : { } = { } ; constructor ( public elementRef ) { } ngAfterViewInit ( ) { this . initItemsIndices ( ) ; this . initTabs ( ) ; this . updateTabContentIndices ( ) ; this . tabs . changes . debounceTime ( 100 ) . subscribe ( ( ) => { this . initItemsIndices ( ) ; this . updateTabContentIndices ( ) ; } ) ; } initItemsIndices ( ) { Array . from ( this . menu . nativeElement . getElementsByClassName ( "item" ) ) . map ( ( element , index ) => { element . setAttribute ( "data-tab" , `tab-${ index }` ) ; jQuery ( element ) . data ( "tab" , `tab-${ index }` ) ; } ) ; } updateTabContentIndices ( ) { this . tabs . map ( ( cmp , index ) => { cmp . tabEl . nativeElement . parentElement . setAttribute ( "data-tab" , `tab-${ index . toString ( ) }` ) ; } ) ; this . initTabs ( ) ; } initTabs ( ) { this . options = Object . assign ( { childrenOnly : true , context : this . elementRef . nativeElement } , this . options ) ; const tab = jQuery ( this . menu . nativeElement . getElementsByClassName ( "item" ) ) . tab ( this . options ) ; if ( ! this . menu . nativeElement . getElementsByClassName ( "item active" ) . length ) { tab . tab ( "change tab" , "tab-0" ) ; } } }