Components with *ngIf are rendered before others about angular HOT 4 CLOSED

What you are observing here is the timing of ngAfterViewInit. The view tree in this example looks like:

• (root)
  • AppRoot
    • Test(Hello)
    • EmbeddedView(ngIf)
      • Test(World)

One of the less obvious aspects of ngAfterViewInit is that it pertains to the host view of a component, not the view created for its template. Since parent views aren't considered initialized until all child views within them have been initialized, it's clear to see that Test(World) will receive ngAfterViewInit after the embedded view which hosts it is initialized, and then Test(Hello) will receive ngAfterViewInit only after the whole AppRoot component view is initialized.

from angular.

What you are observing here is the timing of ngAfterViewInit. The view tree in this example looks like:

• (root)

  • AppRoot

    • Test(Hello)

    • EmbeddedView(ngIf)

      • Test(World)

One of the less obvious aspects of ngAfterViewInit is that it pertains to the host view of a component, not the view created for its template. Since parent views aren't considered initialized until all child views within them have been initialized, it's clear to see that Test(World) will receive ngAfterViewInit after the embedded view which hosts it is initialized, and then Test(Hello) will receive ngAfterViewInit only after the whole AppRoot component view is initialized.

Thanks for answer @alxhub. I tried also ngOnInit and its same behaviour, what is with your explanation of lifecycle flow expectable, but is there any "lifecycle hook" which is resolved like "capture"?

from angular.

ngDoCheck is executed before change detection of a child view, and thus will flow from parent to child.

However, it definitely feels like an anti-pattern to have logic which depends on the relative ordering of lifecycle hooks between components. There are almost certainly better solutions, but without knowing your specific use case it's hard to recommend a design.

from angular.

I was registering Component in service on creation and I need it in order represented in DOM.

But, You are right it is anti-pattern in some way (I was also surprised by behaviour of ngOnInit).
I found better (hope proper) solution, by using @ContentChildren in parent.

Thanks for help.

Edit: I think we can close.

from angular.