D-Net

/**

 * The main component that renders single TabComponent

 * instances.

 */

import {

  Component,

  ContentChildren,

  QueryList,

  AfterContentInit, Output, EventEmitter,

} from '@angular/core';

import { TabComponent } from './tab.component';

@Component({

  selector: 'my-tabs',

  template: `

    <ul [class]="(tabs.toArray().length > 2 ? 'uk-visible@m' : '') + ' uk-tab main-tabs uk-margin-remove uk-child-width-expand'"

        uk-tab uk-switcher="connect: .tabs-content" uk-height-match="target: .tab-header">

      <li *ngFor="let tab of tabs.toArray(); let i=index" 

          [class]="'uk-padding-remove '+ tab.customClass + (i == 0?' uk-active':'')"

          (click)="selectTab(tab)">

        <a class="uk-width-1-1 uk-height-1-1">

          <div class="tab-header">{{tab.title}}</div>

          <div *ngIf="tab.num" class="number">{{tab.num | number}}</div>

          <div *ngIf="tab.customClass == 'statistics'" class="number">

            <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">

              <path d="M0 0h24v24H0z" fill="none"></path>

              <path d="M10 20h4V4h-4v16zm-6 0h4v-8H4v8zM16 9v11h4V9h-4z"></path>

            </svg>

          </div>

        </a>

      </li>

    </ul>

    <div [class]="(tabs.toArray().length > 2 ? 'uk-visible@m' : '') + ' uk-switcher tabs-content main-tabs-content'">

      <ng-content></ng-content>

    </div>

  `

})

export class TabsComponent {

  @ContentChildren(TabComponent) tabs: QueryList<TabComponent>;

  @Output() public selectedActiveTab: EventEmitter<any> = new EventEmitter();

  selectTab(tab: TabComponent){

    // activate the tab the user has clicked on.

    this.selectedActiveTab.emit(tab.tabId);

  }

}