Creating dynamic components in angular 4

gistfile1.txt

The below snippet allows us to dynamically add components into a component. 

// in your component.ts
// contactContainer is a DOM element with a templateRef called #contactContainer
@ViewChild('contactContainer', { read: ViewContainerRef }) contactContainer: ViewContainerRef;

constructor(
  private viewContainerRef: ViewContainerRef,
  private componentFactoryResolver: ComponentFactoryResolver) {
}

...

addComponent() {
  // SelectComponent is the custom component
  const componentFactory: ComponentFactory<SelectComponent> = this.componentFactoryResolver.resolveComponentFactory(SelectComponent);
  let componentRef: ComponentRef<SelectComponent> = this.contactContainer.createComponent(componentFactory);

  // set your input parameters
  componentRef.instance.active = [];
  componentRef.instance.items = this.contacts; // some property
  
  // subscribe to output events
  componentRef.instance.data.subscribe((data: any) => {
    // some function
    this.setContact(data);
  })
  componentRef.instance.placeholder = 'Type or select a contact';
}

// in your html

<ng-container #contactContainer></ng-container>
<button (click)="addComponent">Add<button>