Dynamic Component Creation in Angular 4+

DynamicComponentMyComponent.ts

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

@Component({
  selector: 'my-app',
  template: `<div #container></div>`
})
export class MyAppComponent {
  @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;

  constructor(
    private dynamicComponentService: DynamicComponentService
  ) { }

  ngOnInit() {
    let template = `
      <form>
        <input type="text" [(ngModel)]="data.name" (keyup)="onNameKeyUp($event)" />
        <button type="submit">Submit</button>
      </form>
    `
    this.dynamicComponentService.addComponent(this.container, template, {
      data: {},
      onNameKeyUp: (event) => {
        console.log(event.target.value);
      }
    })
  }
  
}