36

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.

1

1 Answer 1

58

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) :)

2
  • Im using stripe, and card.mount() does not render in the DOM. I check if APIs are pulled in, and if it is I render the page. But the card elements did not render? Anyone? I placed it in AfterContentIniti and Afterviewinit, still... wont render. Any leads? Thanks
    – Gel
    Commented Sep 16, 2019 at 15:53
  • 1
    @Gel You could wrap a @ViewChild() with a setter. E.g. @ViewChild('some-el', { static: false }) set someEl(value: ElemenrRef<SomeT>) { mountStripe(value.nativeElement) }
    – tinnick
    Commented May 8, 2021 at 13:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.