HttpClient requests

Overview

Use this plugin to start and complete the progress bar with your HTTP requests.

Installation

NPM

npm i -S @ngx-progressbar/core @ngx-progressbar/http

YARN

yarn add @ngx-progressbar/core @ngx-progressbar/http

Usage

import { HttpClientModule } from '@angular/common/http';
import { NgProgressModule } from '@ngx-progressbar/core';
import { NgProgressHttpModule } from '@ngx-progressbar/http';

@NgModule({
  imports: [
    // ...
    HttpClientModule,
    NgProgressModule,
    NgProgressHttpModule
  ]
})

And just add the progress bar component in your template

<ng-progress></ng-progress>

NgProgressHttpConfig API

Name	Default	Description
id	root	Progress bar ID.
silentApis	[ ]	Array of silent APIs which will be ignored.

See Http stackblitz

Ignore HTTP requests

There are 2 ways to ignore http requests

1. Ignore a specific http requests

This feature is available in v5.3.0 and above

Use HttpHeaders to ignore a specific http request, Append ignoreProgressBar to request's headers

Example:

const headers = new HttpHeaders({'ignoreProgressBar': ''});
this.http.get(URL, {headers: headers}).subscribe(...);

2. Ignore any requests from a certain API

Example: Let's say we want to ignore all the requests for https://reqres.in/

@NgModule({
  imports: [
    HttpClientModule,
    NgProgressModule,
    NgProgressHttpModule.withConfig({
      silentApis: ['https://reqres.in']
    })
  ]
})

The following request will be ignored

this.http.get('https://reqres.in/api/users?delay=1').subscribe(...)