- Component templates are not always fixed. An application may need to load new components at runtime.
- We can use ComponentFactoryResolver to add components dynamically.
DynamicComponentInjectorService
- To create container to append dynamic component.
<ng-container #cont></ng-container>
@ViewChild("cont", { read: ViewContainerRef }) container: ViewContainerRef;
import { DynamicComponentInjectorService } from 'src/app/services/dynamic-component-injector.service';
- To add the component dynamically.
let component = this.componentInjector.injectComponent(this.controlTypeId, this.options, this.container);
- To add @input() inside dynamic component.
if (component) {
this.component = component.component;
this.cdRef.detectChanges();
for (let key in component.element.instance) {
if (component.element.instance.hasOwnProperty(key + "Change")) {
component.element.instance[key + "Change"].subscribe((val) => {
this.options[key] = val;
this.optionsChange.emit(this.options);
});
}
}
}
dynamic-comp-struct