catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/panel-tab.component.ts

   1 import {
   2   Component,
   3   ViewContainerRef,
   4   ViewChild,
   5   Input,
   6   ComponentRef,
   7   ComponentFactoryResolver,
   8   ChangeDetectorRef,
   9   OnChanges, OnDestroy, AfterViewInit
  10 } from '@angular/core';
  11 import {Component as TopologyTemplate} from 'app/models';
  12
  13 // Helper component to add dynamic tabs
  14 @Component({
  15   selector: 'panel-tab',
  16   template: `<div #content></div>`
  17 })
  18 export class PanelTabComponent implements OnChanges, OnDestroy, AfterViewInit {
  19   @ViewChild('content', { read: ViewContainerRef }) content;
  20   @Input() isActive:boolean;
  21   @Input() panelTabType;
  22   @Input() input;
  23   @Input() isViewOnly:boolean;
  24   @Input() component:TopologyTemplate;
  25   @Input() componentType;
  26   cmpRef: ComponentRef<any>;
  27   private isViewInitialized: boolean = false;
  28
  29   constructor(private componentFactoryResolver: ComponentFactoryResolver,
  30     private cdRef: ChangeDetectorRef) { }
  31
  32   updateComponent() {
  33     if (!this.isViewInitialized || !this.isActive) {
  34       return;
  35     }
  36     if (this.cmpRef) {
  37       this.cmpRef.destroy();
  38     }
  39
  40     let factory = this.componentFactoryResolver.resolveComponentFactory(this.panelTabType);
  41     this.cmpRef = this.content.createComponent(factory);
  42     this.cmpRef.instance.input = this.input;
  43     this.cmpRef.instance.isViewOnly = this.isViewOnly;
  44     this.cmpRef.instance.component = this.component;
  45     this.cmpRef.instance.componentType = this.componentType;
  46     this.cdRef.detectChanges();
  47   }
  48
  49   ngOnChanges() {
  50     this.updateComponent();
  51   }
  52
  53   ngAfterViewInit() {
  54     this.isViewInitialized = true;
  55     this.updateComponent();
  56   }
  57
  58   ngOnDestroy() {
  59     if (this.cmpRef) {
  60       this.cmpRef.destroy();
  61     }
  62   }
  63 }