0

I have an angular component which has some components on its template which take some time to load, As a result the control to ngAfterViewinit() lifecycle hook reaches after some time (~20s) after the component is initialized in ngOnInit(). I want to show a loader on screen in the mean time, but I am unable to do so as the wait component only renders after ngAfterViewinit() and I need to show the loader before this hook.

I am having a component in template as given below to show the loader symbol.

  <wait [isLoading]="isLoading" ></wait>

The problem is that the variable isLoading is reflected to template only after ngAfterViewinit() though it is initialized in ngOnInit().

Madhur Maurya
  • 1,016
  • 4
  • 19
  • 42

2 Answers2

0

what you can do is create a dedicated loading service that will maintain your loading state, position the loader higher on the components hierarchy (for example AppComponent) where it'll be "listening" to the state on that service and will display your loader based on the state in the service.

gil
  • 2,388
  • 1
  • 21
  • 29
  • I also tried to show the loader in parent component but the changes does take place after child `ngAfterViewInit` only is parent also. @gil – Madhur Maurya Apr 04 '22 at 08:12
0

Not seeing the full context here, but if the loading starts with the component regardless why not instanciate isLoading = true; with ngOnInit()?

Joosep Parts
  • 5,372
  • 2
  • 8
  • 33
  • This is what I am doing, but any changes to template are passed over only after `ngAfterViewInit`. The loader is shown after waiting for control to come to `ngAfterViewInit` which itself takes ~20s. – Madhur Maurya Apr 04 '22 at 08:10
  • Then please share more relevant code so we could think of a solution. I understand the problem but we need to see why this is happening. – Joosep Parts Apr 04 '22 at 08:35