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().

CodePudding user response：

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.

CodePudding user response：

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