import { BusyStateComponent } from './../../../busy-state/busy-state.component' ; import { DynamicLoaderDirective } from './../../../shared/directives/dynamic-loader.directive' ; import { Component , OnChanges , Input , Type , ViewChild , ComponentFactoryResolver , SimpleChange } from '@angular/core' ; @ Component ( { selector : 'site-tab' , template : `
      <div *ngIf="initialized">
        <div [hidden]="!active"
          [id]="'site-tab-content-' + id"
          [attr.aria-label]="title"
          role="tabpanel">

          <busy-state [name]="id" cssClass="busy-site-tabs"></busy-state>
          <ng-template *ngIf="componentFactory" dynamic-loader></ng-template>
        </div>
    </div>` , } ) export class SiteTabComponent implements OnChanges { @ ViewChild ( BusyStateComponent ) busyState : BusyStateComponent ; public initialized = false ; @ Input ( ) title : string ; @ Input ( ) id : string ; @ Input ( ) active : boolean ; @ Input ( ) closeable : boolean ; @ Input ( ) iconUrl : string ; @ Input ( ) componentFactory : Type < any > ; @ Input ( ) componentInput : { [ key ] : any ; } ; private _previousInput : { [ key ] : any ; } ; @ ViewChild ( DynamicLoaderDirective ) dynamicLoader : DynamicLoaderDirective ; private _componentRef : any ; constructor ( private _componentFactoryResolver ) { } ngOnChanges ( changes ) { if ( this . componentFactory && this . componentInput && Object . keys ( this . componentInput ) . length > 0 && this . active ) { this . initialized = true ; if ( ! this . _componentRef ) { setTimeout ( ( ) => { if ( this . dynamicLoader ) { const componentFactory = this . _componentFactoryResolver . resolveComponentFactory ( this . componentFactory ) ; const viewContainerRef = this . dynamicLoader . viewContainerRef ; viewContainerRef . clear ( ) ; this . _componentRef = viewContainerRef . createComponent ( componentFactory ) ; this . _setComponentInputs ( this . componentInput ) ; } } ) ; } else if ( this . _previousInput !== this . componentInput ) { this . _setComponentInputs ( this . componentInput ) ; } this . _previousInput = this . componentInput ; } } private _setComponentInputs ( inputs ) { for ( const key in this . componentInput ) { if ( this . componentInput . hasOwnProperty ( key ) ) { this . _componentRef . instance [ key ] = this . componentInput [ key ] ; } } } }