-
Notifications
You must be signed in to change notification settings - Fork 42
Automatically show loader for Http requests
T edited this page Mar 26, 2020
·
4 revisions
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'] });
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. |
- Demo & Examples
-
Getting Started
2.1 Install
2.2 ImportNgxUiLoaderModule
2.3 Includengx-ui-loader
component
2.4 Multiple loaders
2.5 UseNgxUiLoaderService
service - API - NgxUiLoaderService
- Attributes of NgxUiLoaderComponent
-
NgxUiLoaderBlurred directive
5.1 Usage
5.2 Attributes -
Custom Template
6.1 Usage -
Custom configuration for NgxUiLoaderModule
7.1 Usage
7.2 Parameters offorRoot()
method -
Automatically show loader for router events
8.1 Usage
8.2 Parameters offorRoot()
method -
Automatically show loader for http requests
9.1 Usage
9.2 Parameters offorRoot()
method - Changelog
- Credits
- License