Dynamically add components using ViewContainerRef.createComponent

Examples

• 6

  A wrapper component that adds dynamic components declaratively

  edit move example delete share

  6

  A custom component that takes the type of a component as input and creates an instance of that component type inside itself. When the input is updated, the previously added dynamic component is removed and the new one added instead.

  @Component({
    selector: 'dcl-wrapper',
    template: `<div #target></div>`
  })
  export class DclWrapper {
    @ViewChild('target', {
      read: ViewContainerRef
    }) target;
    @Input() type;
    cmpRef: ComponentRef;
    private isViewInitialized: boolean = false;
  
    constructor(private resolver: ComponentResolver) {}
  
    updateComponent() {
      if (!this.isViewInitialized) {
        return;
      }
      if (this.cmpRef) {
        this.cmpRef.destroy();
      }
      this.resolver.resolveComponent(this.type).then((factory: ComponentFactory < any > ) => {
        this.cmpRef = this.target.createComponent(factory)
          // to access the created instance use
          // this.cmpRef.instance.someProperty = 'someValue';
          // this.cmpRef.instance.someOutput.subscribe(val => doSomething());
      });
    }
  
    ngOnChanges() {
      this.updateComponent();
    }
  
    ngAfterViewInit() {
      this.isViewInitialized = true;
      this.updateComponent();
    }
  
    ngOnDestroy() {
      if (this.cmpRef) {
        this.cmpRef.destroy();
      }
    }
  }
  

  This allows you to create dynamic components like

  <dcl-wrapper [type]="someComponentType"></dcl-wrapper>
  

  Plunker example

  edited Jul 29 at 21:44