import { Component , ContentChildren , QueryList , AfterContentInit , ViewChildren , Input } from '@angular/core' ; import { Minitab } from './Minitab' ; /**
 *  Below I demonstrate dynamic class setup.
 *
 *  You can also do [class]="getClass()"  and it will set a string of class or classes, but this will mess
 *  with any of the classes on the element if they are already set.
 *
 *  Often you will want to toggle a single class, which you can do by
 *  using a [class.className] syntax in the property.
 *
 *  and more examples for styles:
 *
 <!-- getColor() returns a valid color -->
 <h1 [style.color]="getColor()">Title</h1>
 <h1 [style.line-height.em]="'2'">Title</h1>

 **/ @ Component ( { selector : 'mini-tabs' , styles : [ `
        .accent {
            background-color: lightgray;
        }
    ` ] , template : `
    <button [ngStyle]="_style" (click)="isAccent($event)">toggle a class style on/off</button>
    <ul class="nav nav-tabs">
      <li let tabItem *ngFor="let tab of tabs" (click)="selectTab(tab,$event)" [class.active]="tab.active"
        [class.accent]="toggleClass">
        <a href="#">{{tab.title}}</a>
      </li>
    </ul>
    <ng-content></ng-content>
  ` } ) export class Minitabs implements AfterContentInit { _style : Object ; @ ViewChildren ( 'tabItem' ) myTabs : QueryList < any > ; @ Input ( 'style' ) set style ( i_style ) { this . _style = i_style ; } ngAfterViewChecked ( ) { } private toggleClass : boolean = false ; @ ContentChildren ( Minitab ) tabs : QueryList < Minitab > ; isAccent ( ) { this . toggleClass = ! this . toggleClass ; this . myTabs . map ( i => { console . log ( 'my tabs ' + i . _appElement . nativeElement ) ; } ) ; } ngAfterContentInit ( ) { console . log ( this . tabs ) ; let activeTabs = this . tabs . filter ( ( tab ) => tab . active ) ; if ( activeTabs . length === 0 ) this . selectTab ( this . tabs . first ) ; } selectTab ( tab , event ? ) { event ? event . preventDefault ( ) : null ; this . tabs . toArray ( ) . forEach ( tab => tab . active = false ) ; tab . active = true ; } }