Is it possible in Angular +2 to do this?
export class AppComponent {
loadSomething()
{
$(.container).append('<app-test></app-test>');
}
}
If it not, what is the right way?
Add a comment
|
1 Answer
Best way is to load component dynamically is to use ComponentFactoryResolver and ViewContainerRef
export class HomeComponent {
constructor(private componentFactoryResolver: ComponentFactoryResolver,
private viewContainerRef: ViewContainerRef) {
}
private loadSomething()() {
const factory = this.componentFactoryResolver.resolveComponentFactory(AppTestComponent);
const ref = this.viewContainerRef.createComponent(factory);
ref.changeDetectorRef.detectChanges();
}
}
ComponentFactoryResolver— service used to get the factory of the component we want to injectViewContainerRef— the container of the parent of our component. createComponent(factory) is the part that actually injects our component into the viewContainerRef that calls itref— Reference of the component we just injected. We call detectChanges on it so angular will call the necessary lifecycle hooks and start the change detection mechanism.
Check out following link for demo
4 Comments
Marvin Ericson
Great! but can I send a specific data from
load() to home component?Marvin Ericson
For example if in home.html I have ngFor that reading data[], can I send other data from component to other and append it?
santosh singh
@MarvinEricson : let me give it a try :)
santosh singh
@MarvinEricson: Yes you can pass data check out this demo link