I am trying to understand exactly what causes the AfterViewInit()
and AfterContentInit()
life-cycle hooks to fire.
From the Official Angular Documentation it says for AfterViewInit()
Angular calls after it creates a component's child views
and it says for AfterContentInit()
Angular calls after Angular projects external content into the component
These two statements already seem nearly indistinguishable to me. Isn't a child view the same as external content?
Take for example: parent.component.html
<div class="parent">
<child-comp></child-comp>
</div>
Where child-comp is a child component that contains a lot of markup and is dependent on asynchronous data.
In the parent.component.ts I want to wait until the child component is completely rendered before calling either AfterViewInit()
or AfterContentInit()
. When I run this code it happens in the exact sequence Angular says it will AfterContentInit()
is called first followed by AfterViewInit()
. Currently the child-comp isn't receiving a lot of data, but eventually it could and it will take longer to render (the data will grow once live).
What I fear is right now since my data is limited and load times are so fast by choosing one life-cycle hook over the other I may be unwillingly end up in a race condition - that will fail once data increases and load times decelerate.