Angular 8/7 | Show Global Progress bar/ Loader on HTTP calls in few steps using Angular Interceptors in Angular 4.3+


Compatible from Angular 4.3 to latest version 7

Angular Interceptors can be used in a number of ways as they provide powerful support to HTTP calls we make from web applications. Web application build using Angular generally makes HTTP calls to the server for dynamic information, so it’s very important to provide information about what’s the status to API calls to users. Loaders/ Spinners and sometimes Progress bars are shown to inform the user that there are some server requests going on.

In this post, we will discuss How to show a common loader/ spinner when the HTTP call is in progress. Not only this we can also handle responses or errors returned by calls. We will maintain the stack or queue to calls and will show loader if requests queue is 1 or more then 1 as sometimes more then one call is also made to get data in dynamic applications.

Also Check: Angular Spinner Loader using ng-http-loader package

Our demo Angular project will have a Loader component, one Interceptor and a service to show/ hide our loader.

Let’s get started!

1) Create a new Angular project

Here we created a new project for a simplified tutorial but you can also implement further steps in your already running projects.

2) Create a Loader Service

Now we will create a loader service, which will only have RxJs BehaviorSubject Observable. We will subscribe to this special Observable type to keep a close watch on HTTP request queue which will be emitted from an Interceptor which we will create.

BehaviorSubject always emit last value directly. You can get more details on this article by Luuk

Run following ng command in CLI to create a loader service in app folder in the project.

–skipTests=true is a new option to skip spec files used for testing.

After creating service replace loader.service.ts with the following code.

3) Create Loader Interceptor

Next, we will create a new class LoaderInterceptor which implements HttpInterceptor

Create a new class file named loader.interceptor.ts in app folder then add below content in it.

The intercept method is required in HttpInterceptor implemented class, this will help in modifying responses and requests made through HTTP Client in Angular application.

The removeRequest method will keep track of the number of HTTP calls in progress by maintaining the queue in an array.

We are emitting true/false boolean value to LoaderService using the next method.

4) Create a Loader Component

To keep loader separate and more customizable, we will create a new Loader component using below command

just add below HTML template in loader.component.html on new loader component.

Replace the loader.component.ts file with the following code

5) Add Loader Component

To show loader we will add loader component in the app.component.html file, which is the root component template as shown below.

6) Add Loader Interceptor in App Module.

We need to add this LoaderInterceptor and LoaderService in the app.module.ts file. Test this loader by creating a sample HTTP call as shown below

Check next post to see how to add Spinners and Progress bar using Angular Material.

That’s it so in this way we can show common loader in Angular based application using the power of Interceptors.


Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

4
Leave a Reply

avatar
3 Comment threads
1 Thread replies
2 Followers
 
Most reacted comment
Hottest comment thread
4 Comment authors
Johan RougJolly.exeJohnAbhishek Tomer Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Abhishek Tomer
Guest

hello, this now working

John
Guest
John

Great post! But I keep getting this error in Angular 8:
“Error: Template parse errors:
‘app-loader’ is not a known element:
1. If ‘app-loader’ is an Angular component, then verify that it is part of this module.
2. If ‘app-loader’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.

“): ng:///AppModule/AppComponent.html@0:0”

Any ideas what I may have done wrong?

Johan Roug
Guest
Johan Roug

Hey
it works. But it is not really a progress bar, more just an infinite spinner until the calls are complete