-1

I am working on a angular Project with multiple modules. I am trying to show a loader on a load of each page and only hide the loader once the request for all the API call is completed for that page.

So, my problem won't be solved just by showing a loader right after onInit is called and hide it after all the request is completed.

suggest me a best option so i can show and hide loader on all api executed.

ngOnInit() {
    this.function1();
    this.function2();
    this.function3();
}

function1(){
    this.spinner.show();
    // API code here.. 
    this.spinner.hide();
}

function2(){
    this.spinner.show();
    // API code here.. 
    this.spinner.hide();
}

function3(){
    this.spinner.show();
    // API code here.. 
    this.spinner.hide();
}
Mahesh Kumar Mehta
  • 1
  • 2
  • 1
    Can you create a Stackblitz example? – Rajat Apr 08 '21 at 06:10
  • When you say you want to show a loader on page load, the page load in context of angular is ngOnInit lifecycle hook. what do you mean by " my problem won't be solved just by showing a loader right after onInit?" – Mehdi Shakeri Apr 08 '21 at 06:10
  • @Rajat can't create an example. – Mahesh Kumar Mehta Apr 08 '21 at 06:20
  • @MehdiShakeri i'm using "this.spinner.show()" on function call and using "this.spinner.hide()" for hide.. here problem is that Loader blinks again and again on all API so i would like to use a common "this.spinner.show()" and "this.spinner.hide()" on all API executed – Mahesh Kumar Mehta Apr 08 '21 at 06:21
  • So why your problem can't be solved by this solution? – Mehdi Shakeri Apr 08 '21 at 06:23
  • https://stackoverflow.com/questions/54135784/how-to-implement-a-global-loader-in-angular/66917696#66917696 – Eliseo Apr 08 '21 at 09:17

1 Answers1

0

Check this out.

component.ts

public isLoading: boolean;

ngOnInit() {

    this.isLoading = true;
    this.myBackendCode().finally(()=> this.isLoading = false;);
}

private async myBackendCode() {
   // code here...
}

component.html

Use your loader like this, in this example is mat-spinner.

<mat-spinner *ngIf="isLoading"></mat-spinner>
<app-something *ngIf="!isLoading"></app-something>
rick
  • 479
  • 5
  • 14