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?

Avinash Raj · Accepted Answer · 2017-03-21 06:47:31Z

2

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">

answered Mar 21, 2017 at 6:47

Avinash Raj

175k32 gold badges247 silver badges289 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

smnbbrv · Accepted Answer · 2017-03-21 06:47:35Z

1

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
      )
}

answered Mar 21, 2017 at 6:47

smnbbrv

24.7k9 gold badges85 silver badges115 bronze badges

Collectives™ on Stack Overflow

Show loader while fetching data in Angular 2

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related