How to add HttpClient Progressive Bar to an Angular Application ?

In this article, we will build a web application in Angular where we will add an HttpClient Progressive Bar to an Angular Application. Here, we’ll add Bootstrap for styling, angular material for material design component and then we will add a progressive bar for every HTTP calls.

Prerequisites: Before we start, you need to install and configure the tools below to create the Angular application:

• Nodejs and npm
• Angular CLI
• An IDE ( VS Code )

Steps to Add Progressive Bar to an Angular Application: The following steps will be implemented to include the HttpClient Progressive Bar in an Angular App:

Step 1: Create an Angular application

• Let’s start by using the Angular CLI to generate our base application structure, with routing and a CSS stylesheet.

> ng new appwithprogressivebar
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
. . .
CREATE appwithprogressivebar/src/app/app.component.css (0 bytes)
✔ Packages installed successfully.
    Successfully initialized git.

• Now to style the web page, we install Bootstrap. To add user interface components to our application, we install @angular/material.

> ng add bootstrap
> ng add @angular/material

• After installation, we will configure the bootstrap libraries. 
• Change this file angular.json and add the CSS and js files to it as below:

"styles": [
    "@angular/material/prebuilt-themes/indigo-pink.css",
    "src/styles.css",
    "./node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
    "./node_modules/bootstrap/dist/js/bootstrap.js"
]

Step 2: Add Loader Service 

• Now let’s create the Loader service.

ng g s services/loader

• Replace service/loader.service.js with this code:

Javascript

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
    providedIn: 'root'
})
export class LoaderService {
    isLoading = new Subject < boolean > ();

    constructor() { }
    show() {
        this.isLoading.next(true);
    }
    hide() {
        this.isLoading.next(false);
    }
}

Step 3:  Add Interceptor

• Now let’s create the Loader Interceptor.

ng g interceptor interceptor/loader

• Replace interceptor/loader.interceptor.ts with this code:

Javascript

import { Injectable } from '@angular/core';
import {
    HttpRequest,
    HttpHandler,
    HttpEvent,
    HttpInterceptor
} from '@angular/common/http';
import { finalize, Observable } from 'rxjs';
import { LoaderService } from '../services/loader.service';

@Injectable()
export class LoaderInterceptor implements HttpInterceptor {

    constructor(public loaderService: LoaderService) { }

    intercept(request: HttpRequest<unknown>, next: HttpHandler):
        Observable<HttpEvent<unknown>> {
        this.loaderService.show();
        return next.handle(request).pipe(
            finalize(() => this.loaderService.hide())
        )
    }
}

Step 4:  Add Services and Interceptor 

• Import LoaderService and LoaderInterceptor into app.module.ts, then add them to the provider’s array in the @NgModule metadata property

providers: [
    LoaderService,
    { provide: HTTP_INTERCEPTORS, useClass: LoaderInterceptor, multi: true}
  ]

• Add the following imports at the top of the app.module.ts file:

import { LoaderService } from './services/loader.service';
import { LoaderInterceptor } from './interceptor/loader.interceptor';
import { HTTP_INTERCEPTORS } from '@angular/common/http';

Step 5: Add Progressive Bar 

• For the Progressive bar, we are using a component of angular material, called “mat-progressbar”. Now add MatProgressBarModule to the imports array of app.module.ts.

imports: [
    ...,
    MatProgressBarModule
  ],

• Add the following imports at the top of the app.module.ts file:

import {MatProgressBarModule} from '@angular/material/progress-bar';

• Now it’s time to create a component for the HTTP progressive bar.
• Let’s create the component with the name loader.

> ng g c loader

• This will generate four files loader.component.ts, loader.component.html, loader.component.css, and loader.component.spec.ts.
• Replace loader/loader.interceptor.html with this code:

Javascript

import { Component } from '@angular/core';
import { LoaderService } \
    from '../services/loader.service';

@Component({
    selector: 'app-loader',
    templateUrl: './loader.component.html',
    styleUrls: ['./loader.component.css']
})
export class LoaderComponent {
    loading: boolean = false;

    constructor(private loaderService: LoaderService) {
        this.loaderService.isLoading.subscribe((v) => {
            this.loading = v;
        });
    }
}

• Now add the progressive bar component to loader/loader.component.html.

<mat-progress-bar *ngIf="loading" mode="indeterminate"></mat-progress-bar>

• Let’s add this loaderComponent to app.component.html.

<app-loader></app-loader>

Step 6:  Add HTTP call for testing 

• We are calling https://jsonplaceholder.typicode.com/posts/?_delay=2000 for testing this application.
• Add httpClientModule to imports array of app.module.ts :

imports: [
    ...,
    HttpClientModule
  ],

• Add the following imports at the top of the app.module.ts file:

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';

• Now add the make HttpCall function in app.component.ts.

Javascript

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'appwithprogressivebar';

    constructor(private http: HttpClient) {
    }

    makeHttpCall() {
        this.http.get(
"https://...com/posts/?_delay=2000").subscribe(d => {
                console.log(d);
            })
    }
}

• It’s time to add the button to the app.component.html file. On clicking this button, the make HttpCall function is called. This creates an HTTP request.
• Replace app.component.html with this code:

HTML

<app-loader></app-loader>
<div class="container d-flex
            align-items-center
            justify-content-center"
     style="height: 90vh;">
    <button type="button"
            (click)="makeHttpCall()"
            class="btn btn-primary">
            Make Http Call
    </button>
</div>

• After completing the above steps, the following output will be displayed:

Screen

Step 7: Run the application

• Finally, we are ready to test our application. Run the application with the command below:

> ng serve

✔ Browser application bundle generation complete.
. . .
** Angular Live Development Server is listening on localhost:4200, 
   open your browser on http://localhost:4200/ **

√ Compiled successfully.

• Ready! We will access the URL at http://localhost:4200/ and check if the application is working.

Output:

Screen with progressive bar