CODEWITHSUNDEEP
angular
Brian Edelman
Brian Edelman

Reputation: 777

Should Angular's AfterContentChecked or AfterViewChecked run after all child components have finished running AfterContentChecked or AfterViewChecked?

I know that in React ComponentDidMount of a parent component will run after all children ComponentDidMounts have run. It seems like this is not the default behavior from Angular (2+) with AfterViewInit, AfterViewChecked, AfterContentInit, or AfterContentChecked. I inherited a project that has a specific set up so it's possible there's something going on there that I don't realize.

My current solution is using a setTimeout in the parent component AfterViewInit (since no other lifecycle method worked I stuck it there) and I want to know if Angular has this same feature as React and maybe I am just missing it.

Upvotes: 0

Views: 2015

Answers (1)

waterplea
waterplea

Reputation: 3651

You need to keep in mind the difference between view and content — content is being checked first, it is whatever your component is wrapped around (my-nested-comp here):

<my-comp>
  <my-nested-comp><my-nested-comp>
</my-comp>

After Angular has done that, it would run ngAfterContentInit. Then if in the template of my-comp there are some other components it is going to run through them, also starting with their content and then their views, all bottom up. After that ngAfterViewInit will be executed. Also at this point you can reliably start working with @ViewChild/rens.

Then the same stuff happens on each change detection cycle, except these hooks are called ngAfterContentChecked/ngAfterViewChecked. Change detection goes bottom up so if you have ChangeDetectionStrategy.OnPush in nested components and their inputs haven't changed, it would not go any deeper.

Upvotes: 2

Related Questions