You need to use ComponentFactoryResolver and ViewContainerRef. Here's the precise approach:
1. Create a Dynamic Component
First, ensure your component is declared as entryComponent (for Angular versions < 9) or properly included in your module:
@Component({
selector: 'app-dynamic',
template: `<h2>Dynamic Component</h2>`
})
export class DynamicComponent {}
2. Implement the Dynamic Injection
In your parent component:
@Component({
selector: 'app-parent',
template: `
<ng-template appComponentHost></ng-template>
<button (click)="loadComponent()">Load Component</button>
`
})
export class ParentComponent implements OnInit {
@ViewChild(ComponentHostDirective, {static: true}) componentHost: ComponentHostDirective;
constructor(private componentFactoryResolver: ComponentFactoryResolver) {}
loadComponent() {
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent);
const viewContainerRef = this.componentHost.viewContainerRef;
viewContainerRef.clear();
viewContainerRef.createComponent(componentFactory);
}
}
3. Update Your Module
@NgModule({
declarations: [
ParentComponent,
DynamicComponent,
ComponentHostDirective
],
entryComponents: [DynamicComponent] // Required for Angular < 9
})
export class AppModule { }
