Solution 1 :

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

Solution 2 :

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.

Problem :

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?


Comment posted by Aakash Garg

stackblitz please?>

Comment posted by brabertaser19

@AakashGarg is this really necessary? it’s more about architecture & generic Angular things… than about single real example

Comment posted by Aakash Garg

if you can give me an example, i can look more clearly whats happening. thats why its required.