CODEWITHSUNDEEP
angulartypescriptpromiseobservableangular7
dota2pro
dota2pro

Reputation: 7856

How to show ( initially ) a loading screen and hide when (e.g. 3 ) get requests are resolved in Angular 2+ / 7 Typescript

I am new to Angular 7, I am trying to show a loading screen at load of app(root) component and then I have 2 components Get1 and Get2 which call 2 Get http requests respectively. How do I hide the loading bar when both Get requests are completed. In AngularJS terms we had a promise.all to know when all requests were done like this http://jsfiddle.net/danielzen/t7g7djzk/ How or what do in Angular using Observables

I can do this 

this.navbarService.getFiscalDateList(this.resultsFilterRootObject)
  .subscribe((data: FiscalWeekListRootObject) => {

      this.fiscalWeekListRootObject = {...data};

      this.currentWeek = this.fiscalWeekListRootObject.data.vehicleFiscalDate.vehicleFiscalWeek;
      //hide loading screen since there is only one GET what to do for multiple GET requests 

    }


  );

Expected: Hide Loading Screen when 2 Observable are resolved in Angular

Upvotes: 0

Views: 427

Answers (2)

Shofol
Shofol

Reputation: 733

You can do this by implementing an interceptor. See this stackblitz here: https://stackblitz.com/github/melcor76/interceptors?file=src%2Fapp%2Finterceptors%2Floader.interceptor.ts

This is from this article- https://blog.angularindepth.com/top-10-ways-to-use-interceptors-in-angular-db450f8a62d6

Upvotes: 1

Arron McCrory
Arron McCrory

Reputation: 728

I had this exact same issue before, the best way to solve this in my opinion is by using an interceptor.

Here is a great article explaining how to get this to work properly, and it works great with 1 or more http calls. It includes code you can copy and paste so you can get your app running quickly.

https://nezhar.com/blog/create-a-loading-screen-for-angular-apps/

Upvotes: 1

Related Questions