Skip to content

Automatically show loader for Http requests

T edited this page Mar 26, 2020 · 4 revisions

9. Automatically show loader for Http requests

9.1 Usage

If you want the loader to start automatically for HTTP requests, in your root AppModule, do as follow:

import { BrowserModule } from  '@angular/platform-browser';
import { NgModule } from  '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

import { NgxUiLoaderModule, NgxUiLoaderHttpModule } from  'ngx-ui-loader';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    HttpClientModule, // import HttpClientModule
    NgxUiLoaderModule, // import NgxUiLoaderModule
    NgxUiLoaderHttpModule, // import NgxUiLoaderHttpModule. By default, it will show background loader.
    // If you need to show foreground spinner, do as follow:
    // NgxUiLoaderHttpModule.forRoot({ showForeground: true })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

If you wish to not show loader for some specific API urls, you can pass an array of these urls (case-insensitive) to forRoot() method as below:

NgxUiLoaderHttpModule.forRoot({ exclude: ['/api/not/show/loader', '/api/logout', 'https://external-domain.com/api/not/to/show'] });

or if you don't want to show loader for urls which start with /api/auth or https://external-domain.com/api/auth, do as follow:

NgxUiLoaderHttpModule.forRoot({ exclude: ['/api/auth'] });
// Or
NgxUiLoaderHttpModule.forRoot({ exclude: ['https://external-domain.com/api/auth'] });

9.2 Parameters of forRoot() method

Parameter Type Required Default Description
delay number optional 0 Set delay for a loader. E.g. If delay = 100, it will not show the loader in the first 100 milliseconds
maxTime number optional -1 The maximum time a loader can be showed. It will be ignored if it <= minTime
minTime number optional 300 The time a loader must be shown at least before it can be stopped. It must be >= 0 millisecond.
exclude string[] optional null The loader is not showed when making requests to the API URLs that start with these strings. Upper/lower case differences will be ignored.
excludeRegexp string[] optional null An array of regexp strings. The loader is not showed when making requests to the API URLs that match these regexps. Upper/lower case differences will be ignored.
loaderId string optional master Specify the loader id which will showed when making HTTP requests. By default, loaderId = DefaultConfig.masterLoaderId
showForeground boolean optional false If true, foreground loader is showed. Otherwise, the background loader is shown.