HttpClient requests (legacy)

Overview

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

Usage

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

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(NgProgressHttpModule),
    provideHttpClient(withInterceptorsFromDi())
  ]
})

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

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

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(
      NgProgressHttpModule.withConfig({
        silentApis: ['https://api.domain.com']
      })
    ),
    provideHttpClient(withInterceptorsFromDi())
  ]
})

Or

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

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(NgProgressHttpModule),
    provideHttpClient(withInterceptorsFromDi()),
    {
      provide: NG_PROGRESS_HTTP_CONFIG,
      useValue: {
        silentApis: ['https://api.domain.com']
      }
    }
  ]
})

Example: Ignore all requests that contains users in their API

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

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(
      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

The matcher option was introduced in version >= 8

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

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(
      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

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

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(
      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