Dynamic component creation for Angualr4+

DynamicComponentService.ts

import { Injectable, Component, NgModule, Compiler } from '@angular/core';
// Import any other module that may required by your dynamic component
import { FormsModule } from '@angular/forms';

@Injectable({
	providedIn: 'root'
})
export class DynamicComponentService {

	constructor(private compiler:Compiler) { }

	addComponent(container, template: string, properties: any = {}) {
		//1) create component
		@Component({template})
		class TempComponent {}

		//2) Create Module
		@NgModule({declarations: [TempComponent], imports: [FormsModule]})
		class TempModule {}

		// 3) compile module
		const mod = this.compiler.compileModuleAndAllComponentsSync(TempModule);

		//4) get the factory of the module
		const factory = mod.componentFactories.find((comp) => comp.componentType === TempComponent);

		// 5) create component
		const component = container.createComponent(factory);

		// 6) Assign properties to component
		Object.assign(component.instance, properties);

		// 7) (optional)may need to be triggered manually:
		component.changeDetectorRef.detectChanges();
	}

}