tab-group.html

<div class="md-tab-header" role="tablist"
     (keydown.arrowRight)="focusNextTab()"
     (keydown.arrowLeft)="focusPreviousTab()"
     (keydown.enter)="selectedIndex = focusIndex">
  <div class="md-tab-label" role="tab" md-tab-label-wrapper
       *ngFor="let tab of _tabs; let i = index"
       [id]="_getTabLabelId(i)"
       [tabIndex]="selectedIndex == i ? 0 : -1"
       [attr.aria-controls]="_getTabContentId(i)"
       [attr.aria-selected]="selectedIndex == i"
       [class.md-active]="selectedIndex == i"
       (click)="focusIndex = selectedIndex = i">
    <template [portalHost]="tab.label"></template>
  </div>
  <md-ink-bar></md-ink-bar>
</div>
<div class="md-tab-body-wrapper">
  <div class="md-tab-body"
       *ngFor="let tab of _tabs; let i = index"
       [id]="getTabContentId(i)"
       [class.md-active]="selectedIndex == i"
       [attr.aria-labelledby]="getTabLabelId(i)">
    <template role="tabpanel" [portalHost]="tab.content" [ngIf]="selectedIndex == i"></template>
  </div>
</div>

tabs.d.ngfactory.ts

/**
 * This file is generated by the Angular 2 template compiler.
 * Do not edit.
 */
 /* tslint:disable */

import * as import0 from '@angular/core/src/linker/debug_context';
import * as import1 from './tabs';
import * as import2 from '@angular/core/src/render/api';
import * as import3 from '@angular/core/src/linker/view';
import * as import4 from '@angular/core/src/linker/element';
import * as import5 from '@angular/core/src/linker/query_list';
import * as import6 from '@angular/core/src/linker/view_utils';
import * as import7 from '@angular/core/src/di/injector';
import * as import8 from '@angular/core/src/linker/view_type';
import * as import9 from '@angular/core/src/change_detection/change_detection';
import * as import10 from '@angular/core/src/zone/ng_zone';
import * as import11 from '@angular/core/src/linker/component_factory';
import * as import12 from './tab-group.css.shim';
import * as import13 from '@angular/core/src/linker/template_ref';
import * as import14 from '@angular/common/src/directives/ng_for';
import * as import15 from './ink-bar';
import * as import16 from '@angular/core/src/change_detection/differs/iterable_differs';
import * as import17 from '@angular/core/src/linker/element_ref';
import * as import18 from '@angular/core/src/metadata/view';
import * as import19 from './tab-label-wrapper';
import * as import20 from '@angular2-material/core/portal/portal-directives';
import * as import21 from '@angular/core/src/linker/component_resolver';
import * as import22 from '@angular/common/src/directives/ng_if';
const nodeDebugInfos_MdTabGroup_Host0:import0.StaticNodeDebugInfo[] = [new import0.StaticNodeDebugInfo([import1.MdTabGroup],import1.MdTabGroup,{})];
var renderType_MdTabGroup_Host:import2.RenderComponentType = null;
class _View_MdTabGroup_Host0 extends import3.DebugAppView<any> {
  _el_0:any;
  private _appEl_0:import4.AppElement;
  _MdTabGroup_0_4:import1.MdTabGroup;
  _query_MdTab_0_0:import5.QueryList<any>;
  constructor(viewUtils:import6.ViewUtils,parentInjector:import7.Injector,declarationEl:import4.AppElement) {
    super(_View_MdTabGroup_Host0,renderType_MdTabGroup_Host,import8.ViewType.HOST,viewUtils,parentInjector,declarationEl,import9.ChangeDetectorStatus.CheckAlways,nodeDebugInfos_MdTabGroup_Host0);
  }
  createInternal(rootSelector:string):import4.AppElement {
    this._el_0 = this.selectOrCreateHostElement('md-tab-group',rootSelector,this.debug(0,0,0));
    this._appEl_0 = new import4.AppElement(0,null,this,this._el_0);
    var compView_0:any = viewFactory_MdTabGroup0(this.viewUtils,this.injector(0),this._appEl_0);
    this._MdTabGroup_0_4 = new import1.MdTabGroup(this.parentInjector.get(import10.NgZone));
    this._query_MdTab_0_0 = new import5.QueryList<any>();
    this._appEl_0.initComponent(this._MdTabGroup_0_4,[],compView_0);
    compView_0.create(this._MdTabGroup_0_4,this.projectableNodes,null);
    this.init([].concat([this._el_0]),[this._el_0],[],[]);
    return this._appEl_0;
  }
  injectorGetInternal(token:any,requestNodeIndex:number,notFoundResult:any):any {
    if (((token === import1.MdTabGroup) && (0 === requestNodeIndex))) { return this._MdTabGroup_0_4; }
    return notFoundResult;
  }
  detectChangesInternal(throwOnChange:boolean):void {
    this.detectContentChildrenChanges(throwOnChange);
    if (!throwOnChange) { if (this._query_MdTab_0_0.dirty) {
      this._query_MdTab_0_0.reset([]);
      this._MdTabGroup_0_4._tabs = this._query_MdTab_0_0;
      this._query_MdTab_0_0.notifyOnChanges();
    } }
    this.detectViewChildrenChanges(throwOnChange);
    if (!throwOnChange) {
      this.debug(0,0,0);
      this._MdTabGroup_0_4.ngAfterViewChecked();
    }
  }
}
function viewFactory_MdTabGroup_Host0(viewUtils:import6.ViewUtils,parentInjector:import7.Injector,declarationEl:import4.AppElement):import3.AppView<any> {
  if ((renderType_MdTabGroup_Host === null)) { (renderType_MdTabGroup_Host = viewUtils.createRenderComponentType('',0,null,[])); }
  return new _View_MdTabGroup_Host0(viewUtils,parentInjector,declarationEl);
}
export const MdTabGroupNgFactory:import11.ComponentFactory<import1.MdTabGroup> = new import11.ComponentFactory<import1.MdTabGroup>('md-tab-group',viewFactory_MdTabGroup_Host0,import1.MdTabGroup);
const styles_MdTabGroup:any[] = [import12.styles];
const nodeDebugInfos_MdTabGroup0:import0.StaticNodeDebugInfo[] = [
  new import0.StaticNodeDebugInfo([],null,{}),
  new import0.StaticNodeDebugInfo([],null,{}),
  new import0.StaticNodeDebugInfo([
    import13.TemplateRef,
    import14.NgFor
  ]
  ,null,{}),
  new import0.StaticNodeDebugInfo([],null,{}),
  new import0.StaticNodeDebugInfo([import15.MdInkBar],null,{}),
  new import0.StaticNodeDebugInfo([],null,{}),
  new import0.StaticNodeDebugInfo([],null,{}),
  new import0.StaticNodeDebugInfo([],null,{}),
  new import0.StaticNodeDebugInfo([],null,{}),
  new import0.StaticNodeDebugInfo([
    import13.TemplateRef,
    import14.NgFor
  ]
  ,null,{}),
  new import0.StaticNodeDebugInfo([],null,{}),
  new import0.StaticNodeDebugInfo([],null,{})
]
;
var renderType_MdTabGroup:import2.RenderComponentType = null;
class _View_MdTabGroup0 extends import3.DebugAppView<import1.MdTabGroup> {
  _viewQuery_MdTabLabelWrapper_0:import5.QueryList<any>;
  _viewQuery_MdInkBar_1:import5.QueryList<any>;
  _el_0:any;
  _text_1:any;
  _anchor_2:any;
  private _appEl_2:import4.AppElement;
  _TemplateRef_2_5:any;
  _NgFor_2_6:import14.NgFor;
  _text_3:any;
  _el_4:any;
  _MdInkBar_4_3:import15.MdInkBar;
  _text_5:any;
  _text_6:any;
  _el_7:any;
  _text_8:any;
  _anchor_9:any;
  private _appEl_9:import4.AppElement;
  _TemplateRef_9_5:any;
  _NgFor_9_6:import14.NgFor;
  _text_10:any;
  _text_11:any;
  private _expr_3:any;
  private _expr_4:any;
  constructor(viewUtils:import6.ViewUtils,parentInjector:import7.Injector,declarationEl:import4.AppElement) {
    super(_View_MdTabGroup0,renderType_MdTabGroup,import8.ViewType.COMPONENT,viewUtils,parentInjector,declarationEl,import9.ChangeDetectorStatus.CheckAlways,nodeDebugInfos_MdTabGroup0);
  }
  createInternal(rootSelector:string):import4.AppElement {
    const parentRenderNode:any = this.renderer.createViewRoot(this.declarationAppElement.nativeElement);
    this._viewQuery_MdTabLabelWrapper_0 = new import5.QueryList<any>();
    this._viewQuery_MdInkBar_1 = new import5.QueryList<any>();
    this._el_0 = this.renderer.createElement(parentRenderNode,'div',this.debug(0,0,0));
    this.renderer.setElementAttribute(this._el_0,'class','md-tab-header');
    this.renderer.setElementAttribute(this._el_0,'role','tablist');
    this._text_1 = this.renderer.createText(this._el_0,'\n  ',this.debug(1,3,50));
    this._anchor_2 = this.renderer.createTemplateAnchor(this._el_0,this.debug(2,4,2));
    this._appEl_2 = new import4.AppElement(2,0,this,this._anchor_2);
    this._TemplateRef_2_5 = new import13.TemplateRef_(this._appEl_2,viewFactory_MdTabGroup1);
    this._NgFor_2_6 = new import14.NgFor(this._appEl_2.vcRef,this._TemplateRef_2_5,this.parentInjector.get(import16.IterableDiffers),this.ref);
    this._text_3 = this.renderer.createText(this._el_0,'\n  ',this.debug(3,13,8));
    this._el_4 = this.renderer.createElement(this._el_0,'md-ink-bar',this.debug(4,14,2));
    this._MdInkBar_4_3 = new import15.MdInkBar(this.renderer,new import17.ElementRef(this._el_4));
    this._text_5 = this.renderer.createText(this._el_0,'\n',this.debug(5,14,27));
    this._text_6 = this.renderer.createText(parentRenderNode,'\n',this.debug(6,15,6));
    this._el_7 = this.renderer.createElement(parentRenderNode,'div',this.debug(7,16,0));
    this.renderer.setElementAttribute(this._el_7,'class','md-tab-body-wrapper');
    this._text_8 = this.renderer.createText(this._el_7,'\n  ',this.debug(8,16,33));
    this._anchor_9 = this.renderer.createTemplateAnchor(this._el_7,this.debug(9,17,2));
    this._appEl_9 = new import4.AppElement(9,7,this,this._anchor_9);
    this._TemplateRef_9_5 = new import13.TemplateRef_(this._appEl_9,viewFactory_MdTabGroup3);
    this._NgFor_9_6 = new import14.NgFor(this._appEl_9.vcRef,this._TemplateRef_9_5,this.parentInjector.get(import16.IterableDiffers),this.ref);
    this._text_10 = this.renderer.createText(this._el_7,'\n',this.debug(10,23,8));
    this._text_11 = this.renderer.createText(parentRenderNode,'\n',this.debug(11,24,6));
    var disposable_0:Function = this.renderer.listen(this._el_0,'keydown.arrowRight',this.eventHandler(this._handle_keydown_arrowRight_0_0.bind(this)));
    var disposable_1:Function = this.renderer.listen(this._el_0,'keydown.arrowLeft',this.eventHandler(this._handle_keydown_arrowLeft_0_1.bind(this)));
    var disposable_2:Function = this.renderer.listen(this._el_0,'keydown.enter',this.eventHandler(this._handle_keydown_enter_0_2.bind(this)));
    this._expr_3 = import9.uninitialized;
    this._expr_4 = import9.uninitialized;
    this.init([],[
      this._el_0,
      this._text_1,
      this._anchor_2,
      this._text_3,
      this._el_4,
      this._text_5,
      this._text_6,
      this._el_7,
      this._text_8,
      this._anchor_9,
      this._text_10,
      this._text_11
    ]
    ,[
      disposable_0,
      disposable_1,
      disposable_2
    ]
    ,[]);
    return null;
  }
  injectorGetInternal(token:any,requestNodeIndex:number,notFoundResult:any):any {
    if (((token === import13.TemplateRef) && (2 === requestNodeIndex))) { return this._TemplateRef_2_5; }
    if (((token === import14.NgFor) && (2 === requestNodeIndex))) { return this._NgFor_2_6; }
    if (((token === import15.MdInkBar) && (4 === requestNodeIndex))) { return this._MdInkBar_4_3; }
    if (((token === import13.TemplateRef) && (9 === requestNodeIndex))) { return this._TemplateRef_9_5; }
    if (((token === import14.NgFor) && (9 === requestNodeIndex))) { return this._NgFor_9_6; }
    return notFoundResult;
  }
  detectChangesInternal(throwOnChange:boolean):void {
    this.debug(2,5,7);
    const currVal_3:any = this.context._tabs;
    if (import6.checkBinding(throwOnChange,this._expr_3,currVal_3)) {
      this._NgFor_2_6.ngForOf = currVal_3;
      this._expr_3 = currVal_3;
    }
    if (!throwOnChange) { this._NgFor_2_6.ngDoCheck(); }
    this.debug(9,18,7);
    const currVal_4:any = this.context._tabs;
    if (import6.checkBinding(throwOnChange,this._expr_4,currVal_4)) {
      this._NgFor_9_6.ngForOf = currVal_4;
      this._expr_4 = currVal_4;
    }
    if (!throwOnChange) { this._NgFor_9_6.ngDoCheck(); }
    this.detectContentChildrenChanges(throwOnChange);
    this.detectViewChildrenChanges(throwOnChange);
    if (!throwOnChange) {
      if (this._viewQuery_MdTabLabelWrapper_0.dirty) {
          this._viewQuery_MdTabLabelWrapper_0.reset([this._appEl_2.mapNestedViews(_View_MdTabGroup1,(nestedView:_View_MdTabGroup1):void => {
            return [nestedView._MdTabLabelWrapper_0_3];
        })]);
        this.context._labelWrappers = this._viewQuery_MdTabLabelWrapper_0;
        this._viewQuery_MdTabLabelWrapper_0.notifyOnChanges();
      }
      if (this._viewQuery_MdInkBar_1.dirty) {
        this._viewQuery_MdInkBar_1.reset([this._MdInkBar_4_3]);
        this.context._inkBar = this._viewQuery_MdInkBar_1;
        this._viewQuery_MdInkBar_1.notifyOnChanges();
      }
    }
  }
  private _handle_keydown_arrowRight_0_0($event:any):boolean {
    this.markPathToRootAsCheckOnce();
    this.debug(0,1,5);
    const pd_0:any = ((<any>this.context.focusNextTab()) !== false);
    return (true && pd_0);
  }
  private _handle_keydown_arrowLeft_0_1($event:any):boolean {
    this.markPathToRootAsCheckOnce();
    this.debug(0,2,5);
    const pd_0:any = ((<any>this.context.focusPreviousTab()) !== false);
    return (true && pd_0);
  }
  private _handle_keydown_enter_0_2($event:any):boolean {
    this.markPathToRootAsCheckOnce();
    this.debug(0,3,5);
    const pd_0:any = ((<any>(this.context.selectedIndex = this.context.focusIndex)) !== false);
    return (true && pd_0);
  }
}
export function viewFactory_MdTabGroup0(viewUtils:import6.ViewUtils,parentInjector:import7.Injector,declarationEl:import4.AppElement):import3.AppView<import1.MdTabGroup> {
  if ((renderType_MdTabGroup === null)) { (renderType_MdTabGroup = viewUtils.createRenderComponentType('/Users/hansl/Sources/_/jelbourn/material2-app/node_modules/@angular2-material/tabs/tab-group.html',0,import18.ViewEncapsulation.Emulated,styles_MdTabGroup)); }
  return new _View_MdTabGroup0(viewUtils,parentInjector,declarationEl);
}
const nodeDebugInfos_MdTabGroup1:import0.StaticNodeDebugInfo[] = [
  new import0.StaticNodeDebugInfo([import19.MdTabLabelWrapper],null,{}),
  new import0.StaticNodeDebugInfo([],null,{}),
  new import0.StaticNodeDebugInfo([
    import13.TemplateRef,
    import20.PortalHostDirective
  ]
  ,null,{}),
  new import0.StaticNodeDebugInfo([],null,{})
]
;
class _View_MdTabGroup1 extends import3.DebugAppView<any> {
  _el_0:any;
  _MdTabLabelWrapper_0_3:import19.MdTabLabelWrapper;
  _text_1:any;
  _anchor_2:any;
  private _appEl_2:import4.AppElement;
  _TemplateRef_2_5:any;
  _PortalHostDirective_2_6:import20.PortalHostDirective;
  _text_3:any;
  private _expr_1:any;
  private _expr_2:any;
  private _expr_3:any;
  private _expr_4:any;
  private _expr_5:any;
  private _expr_6:any;
  constructor(viewUtils:import6.ViewUtils,parentInjector:import7.Injector,declarationEl:import4.AppElement) {
    super(_View_MdTabGroup1,renderType_MdTabGroup,import8.ViewType.EMBEDDED,viewUtils,parentInjector,declarationEl,import9.ChangeDetectorStatus.CheckAlways,nodeDebugInfos_MdTabGroup1);
  }
  createInternal(rootSelector:string):import4.AppElement {
    this._el_0 = this.renderer.createElement(null,'div',this.debug(0,4,2));
    this.renderer.setElementAttribute(this._el_0,'class','md-tab-label');
    this.renderer.setElementAttribute(this._el_0,'md-tab-label-wrapper','');
    this.renderer.setElementAttribute(this._el_0,'role','tab');
    this._MdTabLabelWrapper_0_3 = new import19.MdTabLabelWrapper(new import17.ElementRef(this._el_0));
    this._text_1 = this.renderer.createText(this._el_0,'\n    ',this.debug(1,11,48));
    this._anchor_2 = this.renderer.createTemplateAnchor(this._el_0,this.debug(2,12,4));
    this._appEl_2 = new import4.AppElement(2,0,this,this._anchor_2);
    this._TemplateRef_2_5 = new import13.TemplateRef_(this._appEl_2,viewFactory_MdTabGroup2);
    this._PortalHostDirective_2_6 = new import20.PortalHostDirective(this.parent.parentInjector.get(import21.ComponentResolver),this._appEl_2.vcRef);
    this._text_3 = this.renderer.createText(this._el_0,'\n  ',this.debug(3,12,50));
    this._expr_1 = import9.uninitialized;
    this._expr_2 = import9.uninitialized;
    this._expr_3 = import9.uninitialized;
    this._expr_4 = import9.uninitialized;
    this._expr_5 = import9.uninitialized;
    var disposable_0:Function = this.renderer.listen(this._el_0,'click',this.eventHandler(this._handle_click_0_0.bind(this)));
    this._expr_6 = import9.uninitialized;
    this.init([].concat([this._el_0]),[
      this._el_0,
      this._text_1,
      this._anchor_2,
      this._text_3
    ]
    ,[disposable_0],[]);
    return null;
  }
  injectorGetInternal(token:any,requestNodeIndex:number,notFoundResult:any):any {
    if (((token === import13.TemplateRef) && (2 === requestNodeIndex))) { return this._TemplateRef_2_5; }
    if (((token === import20.PortalHostDirective) && (2 === requestNodeIndex))) { return this._PortalHostDirective_2_6; }
    if (((token === import19.MdTabLabelWrapper) && ((0 <= requestNodeIndex) && (requestNodeIndex <= 3)))) { return this._MdTabLabelWrapper_0_3; }
    return notFoundResult;
  }
  detectChangesInternal(throwOnChange:boolean):void {
    this.debug(2,12,14);
    const currVal_6:any = this.context.$implicit.label;
    if (import6.checkBinding(throwOnChange,this._expr_6,currVal_6)) {
      this._PortalHostDirective_2_6.portal = currVal_6;
      this._expr_6 = currVal_6;
    }
    this.detectContentChildrenChanges(throwOnChange);
    this.debug(0,6,7);
    const currVal_1:any = this.parent.context._getTabLabelId(this.context.index);
    if (import6.checkBinding(throwOnChange,this._expr_1,currVal_1)) {
      this.renderer.setElementProperty(this._el_0,'id',currVal_1);
      this._expr_1 = currVal_1;
    }
    this.debug(0,7,7);
    const currVal_2:any = ((this.parent.context.selectedIndex == this.context.index)? 0: (0 - 1));
    if (import6.checkBinding(throwOnChange,this._expr_2,currVal_2)) {
      this.renderer.setElementProperty(this._el_0,'tabIndex',currVal_2);
      this._expr_2 = currVal_2;
    }
    this.debug(0,8,7);
    const currVal_3:any = this.parent.context._getTabContentId(this.context.index);
    if (import6.checkBinding(throwOnChange,this._expr_3,currVal_3)) {
      this.renderer.setElementAttribute(this._el_0,'aria-controls',((currVal_3 == null)? null: currVal_3.toString()));
      this._expr_3 = currVal_3;
    }
    this.debug(0,9,7);
    const currVal_4:any = (this.parent.context.selectedIndex == this.context.index);
    if (import6.checkBinding(throwOnChange,this._expr_4,currVal_4)) {
      this.renderer.setElementAttribute(this._el_0,'aria-selected',((currVal_4 == null)? null: currVal_4.toString()));
      this._expr_4 = currVal_4;
    }
    this.debug(0,10,7);
    const currVal_5:any = (this.parent.context.selectedIndex == this.context.index);
    if (import6.checkBinding(throwOnChange,this._expr_5,currVal_5)) {
      this.renderer.setElementClass(this._el_0,'md-active',currVal_5);
      this._expr_5 = currVal_5;
    }
    this.detectViewChildrenChanges(throwOnChange);
  }
  dirtyParentQueriesInternal():void {
    (<_View_MdTabGroup0>this.parent)._viewQuery_MdTabLabelWrapper_0.setDirty();
  }
  private _handle_click_0_0($event:any):boolean {
    this.markPathToRootAsCheckOnce();
    this.debug(0,11,7);
    const pd_0:any = ((<any>(this.parent.context.focusIndex = (this.parent.context.selectedIndex = this.context.index))) !== false);
    return (true && pd_0);
  }
}
function viewFactory_MdTabGroup1(viewUtils:import6.ViewUtils,parentInjector:import7.Injector,declarationEl:import4.AppElement):import3.AppView<any> {
  return new _View_MdTabGroup1(viewUtils,parentInjector,declarationEl);
}
const nodeDebugInfos_MdTabGroup2:import0.StaticNodeDebugInfo[] = [];
class _View_MdTabGroup2 extends import3.DebugAppView<any> {
  constructor(viewUtils:import6.ViewUtils,parentInjector:import7.Injector,declarationEl:import4.AppElement) {
    super(_View_MdTabGroup2,renderType_MdTabGroup,import8.ViewType.EMBEDDED,viewUtils,parentInjector,declarationEl,import9.ChangeDetectorStatus.CheckAlways,nodeDebugInfos_MdTabGroup2);
  }
  createInternal(rootSelector:string):import4.AppElement {
    this.init([],[],[],[]);
    return null;
  }
}
function viewFactory_MdTabGroup2(viewUtils:import6.ViewUtils,parentInjector:import7.Injector,declarationEl:import4.AppElement):import3.AppView<any> {
  return new _View_MdTabGroup2(viewUtils,parentInjector,declarationEl);
}
const nodeDebugInfos_MdTabGroup3:import0.StaticNodeDebugInfo[] = [
  new import0.StaticNodeDebugInfo([],null,{}),
  new import0.StaticNodeDebugInfo([],null,{}),
  new import0.StaticNodeDebugInfo([
    import13.TemplateRef,
    import20.PortalHostDirective,
    import22.NgIf
  ]
  ,null,{}),
  new import0.StaticNodeDebugInfo([],null,{})
]
;
class _View_MdTabGroup3 extends import3.DebugAppView<any> {
  _el_0:any;
  _text_1:any;
  _anchor_2:any;
  private _appEl_2:import4.AppElement;
  _TemplateRef_2_5:any;
  _PortalHostDirective_2_6:import20.PortalHostDirective;
  _NgIf_2_7:import22.NgIf;
  _text_3:any;
  private _expr_0:any;
  private _expr_1:any;
  private _expr_2:any;
  private _expr_3:any;
  private _expr_4:any;
  constructor(viewUtils:import6.ViewUtils,parentInjector:import7.Injector,declarationEl:import4.AppElement) {
    super(_View_MdTabGroup3,renderType_MdTabGroup,import8.ViewType.EMBEDDED,viewUtils,parentInjector,declarationEl,import9.ChangeDetectorStatus.CheckAlways,nodeDebugInfos_MdTabGroup3);
  }
  createInternal(rootSelector:string):import4.AppElement {
    this._el_0 = this.renderer.createElement(null,'div',this.debug(0,17,2));
    this.renderer.setElementAttribute(this._el_0,'class','md-tab-body');
    this._text_1 = this.renderer.createText(this._el_0,'\n    ',this.debug(1,21,49));
    this._anchor_2 = this.renderer.createTemplateAnchor(this._el_0,this.debug(2,22,4));
    this._appEl_2 = new import4.AppElement(2,0,this,this._anchor_2);
    this._TemplateRef_2_5 = new import13.TemplateRef_(this._appEl_2,viewFactory_MdTabGroup4);
    this._PortalHostDirective_2_6 = new import20.PortalHostDirective(this.parent.parentInjector.get(import21.ComponentResolver),this._appEl_2.vcRef);
    this._NgIf_2_7 = new import22.NgIf(this._appEl_2.vcRef,this._TemplateRef_2_5);
    this._text_3 = this.renderer.createText(this._el_0,'\n  ',this.debug(3,22,96));
    this._expr_0 = import9.uninitialized;
    this._expr_1 = import9.uninitialized;
    this._expr_2 = import9.uninitialized;
    this._expr_3 = import9.uninitialized;
    this._expr_4 = import9.uninitialized;
    this.init([].concat([this._el_0]),[
      this._el_0,
      this._text_1,
      this._anchor_2,
      this._text_3
    ]
    ,[],[]);
    return null;
  }
  injectorGetInternal(token:any,requestNodeIndex:number,notFoundResult:any):any {
    if (((token === import13.TemplateRef) && (2 === requestNodeIndex))) { return this._TemplateRef_2_5; }
    if (((token === import20.PortalHostDirective) && (2 === requestNodeIndex))) { return this._PortalHostDirective_2_6; }
    if (((token === import22.NgIf) && (2 === requestNodeIndex))) { return this._NgIf_2_7; }
    return notFoundResult;
  }
  detectChangesInternal(throwOnChange:boolean):void {
    this.debug(2,22,30);
    const currVal_3:any = this.context.$implicit.content;
    if (import6.checkBinding(throwOnChange,this._expr_3,currVal_3)) {
      this._PortalHostDirective_2_6.portal = currVal_3;
      this._expr_3 = currVal_3;
    }
    this.debug(2,22,57);
    const currVal_4:any = (this.parent.context.selectedIndex == this.context.index);
    if (import6.checkBinding(throwOnChange,this._expr_4,currVal_4)) {
      this._NgIf_2_7.ngIf = currVal_4;
      this._expr_4 = currVal_4;
    }
    this.detectContentChildrenChanges(throwOnChange);
    this.debug(0,19,7);
    const currVal_0:any = this.parent.context.getTabContentId(this.context.index);
    if (import6.checkBinding(throwOnChange,this._expr_0,currVal_0)) {
      this.renderer.setElementProperty(this._el_0,'id',currVal_0);
      this._expr_0 = currVal_0;
    }
    this.debug(0,20,7);
    const currVal_1:any = (this.parent.context.selectedIndex == this.context.index);
    if (import6.checkBinding(throwOnChange,this._expr_1,currVal_1)) {
      this.renderer.setElementClass(this._el_0,'md-active',currVal_1);
      this._expr_1 = currVal_1;
    }
    this.debug(0,21,7);
    const currVal_2:any = this.parent.context.getTabLabelId(this.context.index);
    if (import6.checkBinding(throwOnChange,this._expr_2,currVal_2)) {
      this.renderer.setElementAttribute(this._el_0,'aria-labelledby',((currVal_2 == null)? null: currVal_2.toString()));
      this._expr_2 = currVal_2;
    }
    this.detectViewChildrenChanges(throwOnChange);
  }
}
function viewFactory_MdTabGroup3(viewUtils:import6.ViewUtils,parentInjector:import7.Injector,declarationEl:import4.AppElement):import3.AppView<any> {
  return new _View_MdTabGroup3(viewUtils,parentInjector,declarationEl);
}
const nodeDebugInfos_MdTabGroup4:import0.StaticNodeDebugInfo[] = [];
class _View_MdTabGroup4 extends import3.DebugAppView<any> {
  constructor(viewUtils:import6.ViewUtils,parentInjector:import7.Injector,declarationEl:import4.AppElement) {
    super(_View_MdTabGroup4,renderType_MdTabGroup,import8.ViewType.EMBEDDED,viewUtils,parentInjector,declarationEl,import9.ChangeDetectorStatus.CheckAlways,nodeDebugInfos_MdTabGroup4);
  }
  createInternal(rootSelector:string):import4.AppElement {
    this.init([],[],[],[]);
    return null;
  }
}
function viewFactory_MdTabGroup4(viewUtils:import6.ViewUtils,parentInjector:import7.Injector,declarationEl:import4.AppElement):import3.AppView<any> {
  return new _View_MdTabGroup4(viewUtils,parentInjector,declarationEl);
}

tabs.ts

import {
    ContentChild,
    Directive,
    Component,
    Input,
    Output,
    ViewChildren,
    NgZone,
    EventEmitter,
    QueryList,
    ContentChildren
} from '@angular/core';
import {NgIf, NgFor} from '@angular/common';
import {PortalHostDirective} from '@angular2-material/core/portal/portal-directives';
import {MdTabLabel} from './tab-label';
import {MdTabContent} from './tab-content';
import {MdTabLabelWrapper} from './tab-label-wrapper';
import {MdInkBar} from './ink-bar';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';

/** Used to generate unique ID's for each tab component */
let nextId = 0;

/** A simple change event emitted on focus or selection changes. */
export class MdTabChangeEvent {
  index: number;
  tab: MdTab;
}

@Directive({
  selector: 'md-tab'
})
export class MdTab {
  @ContentChild(MdTabLabel) label: MdTabLabel;
  @ContentChild(MdTabContent) content: MdTabContent;
}

/**
 * Material design tab-group component.  Supports basic tab pairs (label + content) and includes
 * animated ink-bar, keyboard navigation, and screen reader.
 * See: https://www.google.com/design/spec/components/tabs.html
 */
@Component({
  selector: 'md-tab-group',
  templateUrl: 'tab-group.html',
  styleUrls: ['tab-group.css'],
  directives: [PortalHostDirective, MdTabLabelWrapper, MdInkBar, NgIf, NgFor],
})
export class MdTabGroup {
  @ContentChildren(MdTab) _tabs: QueryList<MdTab>;

  @ViewChildren(MdTabLabelWrapper) _labelWrappers: QueryList<MdTabLabelWrapper>;
  @ViewChildren(MdInkBar) _inkBar: QueryList<MdInkBar>;

  private _isInitialized: boolean = false;

  private _selectedIndex: number = 0;
  @Input()
  set selectedIndex(value: number) {
    if (value != this._selectedIndex) {
      this._selectedIndex = value;

      if (this._isInitialized) {
        this._onSelectChange.emit(this._createChangeEvent(value));
      }
    }
  }
  get selectedIndex(): number {
    return this._selectedIndex;
  }

  /** Output to enable support for two-way binding on `selectedIndex`. */
  @Output('selectedIndexChange') private get _selectedIndexChange(): Observable<number> {
    return this.selectChange.map(event => event.index);
  }

  private _onFocusChange: EventEmitter<MdTabChangeEvent> = new EventEmitter<MdTabChangeEvent>();
  @Output('focusChange') get focusChange(): Observable<MdTabChangeEvent> {
    return this._onFocusChange.asObservable();
  }

  private _onSelectChange: EventEmitter<MdTabChangeEvent> = new EventEmitter<MdTabChangeEvent>();
  @Output('selectChange') get selectChange(): Observable<MdTabChangeEvent> {
    return this._onSelectChange.asObservable();
  }

  private _focusIndex: number = 0;
  private _groupId: number;

  constructor(private _zone: NgZone) {
    this._groupId = nextId++;
  }

  /**
   * Waits one frame for the view to update, then upates the ink bar
   * Note: This must be run outside of the zone or it will create an infinite change detection loop
   * TODO: internal
   */
  ngAfterViewChecked(): void {
    this._zone.runOutsideAngular(() => {
      window.requestAnimationFrame(() => {
        this._updateInkBar();
      });
    });
    this._isInitialized = true;
  }

  /** Tells the ink-bar to align itself to the current label wrapper */
  private _updateInkBar(): void {
    this._inkBar.toArray()[0].alignToElement(this._currentLabelWrapper);
  }

  /**
   * Reference to the current label wrapper; defaults to null for initial render before the
   * ViewChildren references are ready.
   */
  private get _currentLabelWrapper(): HTMLElement {
    return this._labelWrappers && this._labelWrappers.length
        ? this._labelWrappers.toArray()[this.selectedIndex].elementRef.nativeElement
        : null;
  }

  /** Tracks which element has focus; used for keyboard navigation */
  get focusIndex(): number {
    return this._focusIndex;
  }

  /** When the focus index is set, we must manually send focus to the correct label */
  set focusIndex(value: number) {
    this._focusIndex = value;

    if (this._isInitialized) {
      this._onFocusChange.emit(this._createChangeEvent(value));
    }

    if (this._labelWrappers && this._labelWrappers.length) {
      this._labelWrappers.toArray()[value].focus();
    }
  }

  private _createChangeEvent(index: number): MdTabChangeEvent {
    const event = new MdTabChangeEvent;
    event.index = index;
    if (this._tabs && this._tabs.length) {
      event.tab = this._tabs.toArray()[index];
    }
    return event;
  }

  /** Returns a unique id for each tab label element */
  _getTabLabelId(i: number): string {
    return `md-tab-label-${this._groupId}-${i}`;
  }

  /** Returns a unique id for each tab content element */
  _getTabContentId(i: number): string {
    return `md-tab-content-${this._groupId}-${i}`;
  }

  /** Increment the focus index by 1; prevent going over the number of tabs */
  focusNextTab(): void {
    if (this._labelWrappers && this.focusIndex < this._labelWrappers.length - 1) {
      this.focusIndex++;
    }
  }

  /** Decrement the focus index by 1; prevent going below 0 */
  focusPreviousTab(): void {
    if (this.focusIndex > 0) {
      this.focusIndex--;
    }
  }
}

export const MD_TABS_DIRECTIVES = [MdTabGroup, MdTabLabel, MdTabContent, MdTab];