Menu
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.
753
ngAfterViewInit()linkA callback method that is invoked immediately after Angular has completed initialization of a component's view. It is invoked only once when the view is instantiated.
ngAfterContentInit()linkA callback method that is invoked immediately after Angular has completed initialization of all of the directive's content. It is invoked only once when the directive is instantiated.
ngAfterContentInit : This is called after components external content has been initialized. ngAfterViewInit : This is called after the component view and its child views has been initialized.
ngAfterViewChecked()That means Checked states to say it runs after Init . Initialization means it runs at first and Checking for the changes runs many times after initialization.
This starts to make more sense if you've began some dynamic component loading or manual view creation in Angular.
OnInit is called once when the component's @Inputs and @Outputs have been resolved.
AfterViewInit is called when the component's view has been attached. Remember that Angular compiles all views to JS files, not html - the framework manages templates in code and has a rendering engine to interact with the DOM. In addition to actually rendering components, Angular needs to recursively build and manage child/parent relationships in regard to component bindings and their lifetime cycles. Child components will also need their bindings resolved and to go through the same rendering lifecycle as their parents. Simply put, at this hook @ViewChild and @ViewChildren will be resolved -- child components will be fully initialized, and their properties will be available.
AfterContentInit is a little weirder. It's called when the component's child views and external content have been attached. This comes from content projection, normally into <ng-content> tags. It's another step the renderer needs to take going down the tree, resolving all projected content before attaching it to the disjointed view. You really don't need to worry about it if you're not messing around with templates or <ng-content>. Here @ContentChild and @ContentChildren will be resolved.
As for the race condition you mentioned, there is no need to worry if you are using the right lifecycle hook for what's needed -- they're just hooks called immediately after @Inputs, @ViewChildren, and @ContentChildren have been set on the component -- race conditions for injected properties shouldn't exist through the inversion of control to change detection (non-framework factors nonwithstanding) :)
94
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
