Let's say I have the main app.component with <router-outlet/> and this component can have multiple nested components. Some of them are very lightweight, some of them have tons of component-code a lot of DOM objects, like images etc.

It looks that when I use on my main app.component

public ngAfterViewInit(): void {
  console.log('loaded: ', new Date());
}

it fires imideatly after this component's view is inited, not taking into account all nested childs (I can't hardcode ngAfterViewInit everywhere - I have more than 100 components).

Is there any good way to know when all components Views are invited in Angular?

Also is there any good way to know also when all images are loaded on current route page?

CodePudding user response：

I guess not all components are loaded when you initiate app.component.ts. it's more about modules, when you hit a lazy loaded module all of its components are initiated, and so on.

CodePudding user response：

When your root component is loaded this is signal about all child component is loaded on that CD tick. With router components, you need to implement the same logic(when the root of the current route is loaded then all children are loaded).

Example link with loaded images counter, router-outlet counter and how works ViewInit