Dynamic component loading cookbook

dynamic-component.ts

import {
  NgModule,
  Component,
  Directive,
  ViewContainerRef,
  ViewChild,
  ComponentFactoryResolver,
} from '@angular/core';


/**
 * This is the component we want to dynamically load.
 */
@Component({
  selector: 'user-profile',
  template: '<p><label>Username: <input></label></p>'
})
export class UserProfile { }


/**
 * This is a helper directive that marks where in a template a dynamically
 * loaded component should go.
 */
@Directive({
  selector: '[place-where-component-goes]'
})
export class PlaceWhereComponentGoes {
  constructor(public viewContainerRef: ViewContainerRef) { }
}


/**
 * This is the component in which we want to dynamically load a component.
 */
@Component({
  selector: 'main-app-content',
  template: `
  <h2>Dynamically laded content:</h2>
  
  <!-- Using a <template> element is good because it will not render any additional output. -->
  <template place-where-component-goes></template>
  `
})
export class MainApp {
  @ViewChild(PlaceWhereComponentGoes) placeWhereComponentGoes: PlaceWhereComponentGoes;

  constructor(private _componentFactoryResolver: ComponentFactoryResolver) { }

  dynamicallyLoadUserProfile() {
    // Get the component factory for the component that we want to dynamically load.
    let componentFactory = this._componentFactoryResolver.resolveComponentFactory(UserProfile);

    // To dynamically load a component, we need a reference to the view container for the place
    // into which we want the component to be loaded. Recall that an Angular application is
    // a tree of components; the view container represents a place in that tree where the
    // dynamically loaded component lives.
    let viewContainerRef = this.placeWhereComponentGoes.viewContainerRef;

    // We can now simply create an instance of the component in the view container.
    // We get back a ComponentRef, through which we can access the UserProfile instance. We can
    // also use the ComponentRef to destroy the component.
    let componentRef = viewContainerRef.createComponent(componentFactory);
  }
}


/**
 * This is the NgModule for the application.
 */
@NgModule({
  declarations: [UserProfile, PlaceWhereComponentGoes, MainApp],

  // Any components that will be dynamically loaded must be listed in `entryComponents`.
  // This tells Angular to compile the component even though it does not encounter it in any
  // template during bootstrap.
  entryComponents: [UserProfile],
  bootstrap: [MainApp],
})
export class ExampleModule { }