Dynamically add components using ViewContainerRef.createComponent All Versions

Examples

• Improvements requested:

  • This example does not sufficiently illustrate the point and needs to be edited to provide more details. –  Vin Nov 15 at 4:42

    Hi, the attached plunker doesn't layout the tabs horizontally, neither does it allow clicking on tabs.

    1. This example does not slove the issue what you are thinking. It takes Array of components as input and load them dynamically on page. there is nothing like tabs
       –  amansoni211 Mar 9 at 18:27
    2. This example/answer is not about layout. It's about adding components dynamically.
       –  Günter Zöchbauer Mar 9 at 18:30

  Edit Example Delete Example
  8

  A wrapper component that adds dynamic components declaratively
  8

  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 '16 at 21:44

  

  

  
  edit share discuss request improvement (1)

  edit move example delete example
• 1

  Dynamically add component on specific event(click)
  1

  Main Component File:

  //our root app component
  import {Component, NgModule, ViewChild, ViewContainerRef, ComponentFactoryResolver, ComponentRef} from '@angular/core'
  import {BrowserModule} from '@angular/platform-browser'
  import {ChildComponent} from './childComp.ts'
  
  @Component({
    selector: 'my-app',
    template: `
      <div>
        <h2>Hello {{name}}</h2>
        <input type="button" value="Click me to add element" (click) = addElement()> // call the function on click of the button
        <div #parent> </div> // Dynamic component will be loaded here
      </div>
    `,
  })
  export class App {
    name:string;
    
    @ViewChild('parent', {read: ViewContainerRef}) target: ViewContainerRef;
    private componentRef: ComponentRef<any>;
  
    constructor(private componentFactoryResolver: ComponentFactoryResolver) {
      this.name = 'Angular2'
    }
    
    addElement(){
      let childComponent = this.componentFactoryResolver.resolveComponentFactory(ChildComponent);
      this.componentRef = this.target.createComponent(childComponent);
    }
  }
  

  childComp.ts :

  import{Component} from '@angular/core';
  
  @Component({
    selector: 'child',
    template: `
      <p>This is Child</p>
    `,
  })
  export class ChildComponent {
    constructor(){
      
    }
  }
  

  app.module.ts :

  @NgModule({
    imports: [ BrowserModule ],
    declarations: [ App, ChildComponent ],
    bootstrap: [ App ],
    entryComponents: [ChildComponent] // define the dynamic component here in module.ts
  })
  export class AppModule {}
  

  Plunker example

  created Feb 19 at 9:41

  
  edit share discuss (4) request improvement

  edit move example delete example