What is the Life Cycle Event to check whether the Dom is fully loaded

[Trupti Baliarsingh]

I need to use the modal footer once the template is fully loaded. If I am writing the code inside ngAfterViewInit then I am not getting the footer element. If I am keeping the code inside ngAfterViewChecked then only I am getting the modal footer because ngAfterViewChecked is getting called multiple times.But this is not the correct way as sometimes any error is there then it will get logged multiple times.Please help me with the better way.

[Sander Elias]

Hi Trupti,

How is the footer added? It is strange its not there in afterviewInit. I suspect there is a condition somewhere, that keeps the footer from being added before ngAfterViewInit.

if you need to "communicate" with the footer, perhaps a service that's injected will solve your issue.

Regards

Sander

[Trupti Baliarsingh]

Hi Sander,

The footer is getting loaded from another library. Could you please help how to use a service here to solve my problem.

We have another scenario also where the part of the template is coming from the back-end API. In this case also the html element which I want to manipulate in component ,is not available in ngAfterViewInit. It's getting available in ngAfterViewChecked as it's getting called multiple times and some time the service call will be done and that html DOM will be available.

[Sander Elias]

The footer is getting loaded from another library. Could you please help how to use a service here to solve my problem.

That is the source of the issue. In this case, a service won't help you, because the other library can't tap into angular services. 

 

We have another scenario also where the part of the template is coming from the back-end API. In this case also the html element which I want to manipulate in component ,is not available in ngAfterViewInit. It's getting available in ngAfterViewChecked as it's getting called multiple times and some time the service call will be done and that html DOM will be available.

 

I have an idea, but for that to work, I need to know, you need to run your code only once? And when the footer is in place it is there for the entire life-cycle of the app?

[Trupti Baliarsingh]

• The code will be run each time I load a message. We have view overlay and for each message we are loading the overlay and the footer will be loaded inside view overlay.

[Trupti Baliarsingh]

The footer is getting loaded from another library. Could you please help how to use a service here to solve my problem.

That is the source of the issue. In this case, a service won't help you, because the other library can't tap into angular services. 

We are installing the modal through npm and it will be a package inside nodemodule. Do you have any way around to get the footer element reference ?

[Sander Elias]

Is the footer coming from an angular library? if so, you might be able to retrieve it 

[Sander Elias]

Use a muttionObserver to get a hold of the element. Make sure its as targeted as possible.

[Trupti Baliarsingh]

Yes it's like angular library. Could you please help me if there is way to retrieve?

[Trupti Baliarsingh]

Thank you so much for providing a solution. I will try this approach. But I did not understand the second line "Make sure its as targeted as possible." Could you please elaborate little more.

[Sander Elias]

This makes it easier.

Use `@viewChildren(footerComponent)` and subscribe to the changes of that.