Show loader while fetching data in Angular 2

Question

I have a loader.component.ts with the selector <app-loader>.

This Tag is in main-compontent.html and shows up.

<app-loader *ngIf="!showLoader === true">

I want, that the loader should just show up, while i fetching data.

I fetch data with following Code:

showLoader = true;    
ngOnInit() {
        this.httpService.getOffer()
          .subscribe(
            data => this.offers = data
          )
        this.showLoader = false;
      }

As you can see, is the showLoader variable on true, and after fetching the data it should be false, but it don't works. What's wrong?

Answer 1

Move the this.showLoader = false; into the subscribe block's success and err functions. Because of the javascript's async feature, your showLoader gets set to False before the backend call.

And a simple ngIf condition would be better.

<app-loader *ngIf="showLoader">

Answer 2

You most likely want to hide the spinner after the data is received or an error occured

showLoader = true;    

ngOnInit() {
  this.httpService.getOffer()
      .subscribe(
        data => {
          this.offers = data;
          this.showLoader = false;
        },
        error => this.showLoader = false
      )
}