There are different options:
1) Built-in structural directive ngComponentOutlet
<ng-container *ngComponentOutlet="data.component"></ng-container>
Example
2) Using angular material cdk. More precisely you can use PortalModule
from secondary entry point @angular/cdk/portal
dialog.component.ts
import { ComponentPortal } from '@angular/cdk/portal';
@Component({...})
export class DialogDialog {
portal: ComponentPortal<any>;
constructor(...
@Inject(MAT_DIALOG_DATA) public data: any) { }
ngOnInit() {
this.portal = new ComponentPortal(this.data.component);
}
dialog.component.html
<ng-template [cdkPortalOutlet]="portal"></ng-template>
Example
3) Using Angular low-level API
dialog.component.ts
@Component({...})
export class DialogDialog {
@ViewChild('target', { read: ViewContainerRef }) vcRef: ViewContainerRef;
componentRef: ComponentRef<any>;
constructor(
...
private resolver: ComponentFactoryResolver,
@Inject(MAT_DIALOG_DATA) public data: any) { }
ngOnInit() {
const factory = this.resolver.resolveComponentFactory(this.data.component);
this.componentRef = this.vcRef.createComponent(factory);
}
ngOnDestroy() {
if (this.componentRef) {
this.componentRef.destroy();
}
}
}
dialog.component.html
<ng-template #target></ng-template>
Example
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…