HttpClient requests

Overview

Use this module to start/complete the progress bar with your HTTP requests.

Usage

import { NgProgressModule } from 'ngx-progressbar';
import { NgProgressHttpModule } from 'ngx-progressbar/http';

@NgModule({
  imports: [
    // ...
    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.
matcher	undefined	More flexible/permissive. subdomain.

See demo stackblitz

Ignore HTTP requests

There are 3 ways to ignore http requests

1. Ignore a specific http requests

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 }).subscribe(...);

2. Ignore any requests from a certain API

Example: Let's say we want to ignore all the requests for https://api.domain.com

@NgModule({
  imports: [
    NgProgressModule,
    NgProgressHttpModule.withConfig({
      silentApis: ['https://api.domain.com']
    })
  ]
})

NOTE:

Before version 8, silentApis used to check the url using url.startsWith()

After version >= 8, silentApis checks the url using url.includes()

Example: After version v8, ignore all requests that contains users in their API

@NgModule({
  imports: [
    NgProgressModule,
    NgProgressHttpModule.withConfig({
      silentApis: ['users']
    })
  ]
})

Result:

https://prod.domain.com/users  ===> will be ignored
https://example.com/users      ===> will be ignored
https://domain.com/reviews     ===> will NOT be ignored

3. Ignore requests using matcher option

@NgModule({
  imports: [
    NgProgressModule,
    NgProgressHttpModule.withConfig({
      matcher: `https?:\\/\\/(\\S*\\.)?domain\\.com`
    })
  ]
})

Result:

https://api.domain.com/places       ===> will be ignored
https://prod.domain.com/users       ===> will be ignored
https://domain.com/reviews/v1/test  ===> will be ignored

Using matcher along with silentApis

@NgModule({
  imports: [
    NgProgressModule,
    NgProgressHttpModule.withConfig({
      silentApis: ['v1', 'users'],
      matcher: `https?:\\/\\/(\\S*\\.)?domain\\.com`
    })
  ]
})

Result:

https://api.domain.com/places       ===> will NOT be ignored
https://prod.domain.com/users       ===> will be ignored
https://domain.com/reviews/v1/test  ===> will be ignored