Explain dynamic components with example.

Dynamic components were the components in which components position in the app is not defined at build time. i.e, they were not utilized in any angular template. However the component is instantiated and placed in the app at runtime.

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

import { DynamicComponent } from './dynamic/dynamic.component';

@Component({

  selector: 'my-app',

  templateUrl: './app.component.html',

  styleUrls: [ './app.component.css' ]

})

export class AppComponent {

  @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;

  private _counter = 1;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) { }

  add(): void {

    // create the component factory

    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent);

    // add the component to the view

    const componentRef = this.container.createComponent(componentFactory);

    // pass some data to the component

    componentRef.instance.index = this._counter++;

  }

}