CODEWITHSUNDEEP
angularangular-lifecycle-hooks
iamdlm
iamdlm

Reputation: 1973

Angular lifecycle hooks and rendering components

Consider the following html:

<html>
<body>
<app-header></app-header>
<app-footer></app-footer>
</body>
</html>

If I use the app-footer hook ngAfterViewInit() to append a script to the html which contains jQuery that handles elements in the app-header component, will work?

When does the app-header hook ngAfterViewInit() is executed compared to the app-footer hook?
Will it be executed first? Asynchronously?

Upvotes: 1

Views: 1604

Answers (1)

GreyBeardedGeek
GreyBeardedGeek

Reputation: 30088

First, I think it unwise to try to depend on the order and timing of the execution of lifecycle methods in multiple components, since that order and timing is not gauranteed.

Even if you get that working in your development environment, it is unlikely to work exactly that way on other clients, on all browsers, and with future versions of Angular.

It would be much safer to simply depend on the parent component's afterViewInit lifecycle method, during which it is guaranteed that the two children will have been initialized.

Second, I believe that it is generally recommend to not access the DOM directly, but to do so through a Renderer. Using jQuery violates that recommendation. You should probably look for an Angular-specific way to do what you need instead of using jQuery.

Upvotes: 2

Related Questions