When is OnInit event triggered for a dynamically loaded angular component?

Question

I am dynamically loading an Angular component (MyComponent) with the following code. I am also passing some data to the component after creating it.

let componentFactory = this.componentFactoryResolver.resolveComponentFactory(MyComponent);
this.viewContainerRef.clear();
let componentRef = this.viewContainerRef.createComponent(componentFactory);

(<MyComponent>componentRef.instance).setData(data);

When will the OnInit lifecycle event of the MyComponent be triggered? Will it be triggered immediately after calling createComponent()? Or will it only be called after setData()?

Ypres

Answer 1

ngOnInit hook will be triggered on the next change detection cycle that covers dynamic component. By covering I mean that the view for dynamic component should be created and it should be attached to Angular change detection tree.

ViewContainerRef::createComponent method only attaches newly created View to the current view and renders it.

Once that new View is attached to the tree Angular can check it during change detection phase.

The next change detection phase starts once NgZone determines that there is no microtasks scheduled. For example, it will happen after your event handler or after http call.

You can manually trigger change detection for that created view:

const componentRef = this.target.createComponent(componentFactory);

componentRef.changeDetectorRef.detectChanges(); // ngOnInit will be called 

componentRef.instance.x = 3; // access this.x in ngOnInit will give you undefined

On the other hand, in your case ngOnInit will have access to any properties you passed in during setData call.

const componentRef = this.target.createComponent(componentFactory);

componentRef.instance.x = 3;

// somewhen later ngOnInit will be called 

Emelineemelita

This saved me hours of debugging – Espy

Answer 2

From the documentation :

Initialize the directive/component after Angular first displays the data-bound properties and sets the directive/component's input properties.

Called once, after the first ngOnChanges().

This means it's called once the interpolation is done and the inputs are set.

Rempe