NGX HTTP LOADER
What is use?
ngx-http-loader HTTP loader for Angular 6 and 6+ with different types of loaders, custom loader, custom complete template with title and subtitle, managing colors, font size, text colors etc. Complete package with custamization support. Interceptor will helps to shows loader when http/xhr request calls. The loader visible until the http/xhr request is in pending to complete status. If want to show and hide loader forcefully or any other operation Using NgxHttpLoaderService call show() and hide() methods.
Supports
| Angular Version | Package Version |
|---|
| Angular 7 | Version 7 |
| Angular 8 | Version 8 |
| Angular 9 | Version 9 |
| Angular 10 | Version 10 |
| Angular 11 | Version 11 |
| Angular 12 | Version 12 |
| Angular 13 | Version 13 |
| Angular 14 | Version 14 |
| Angular 15 | Version 15 |
| Angular 16 | Version 16 |
Installation
npm install --save ngx-http-loader
Features
- HTTP interceptor
- Multiple types of loaders
- Custom loader support
- Custom template support
- Customize backdrop background color, text color, icon color etc
- Title or Subtitle/Description support
- Time Delay Support
- Show and Hide Services Available
- Filters request complete url, regex pattern urls, http methods or hearders for hide loader
Usage
From your Angular AppModule:
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
// [...]
import { AppComponent } from "./app.component";
import { HttpClientModule } from "@angular/common/http"; // <============
import { NgxHttpLoaderModule } from "ngx-http-loader"; // <============
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
HttpClientModule, // <============ (Perform HTTP requests with this module)
NgxHttpLoaderModule.forRoot(), // <============ Don't forget to call 'forRoot()'!
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
In your app.component.html, simply add:
<ngx-http-loader [opacity]="0.9" [title]="'procodeprograming.com'" [subTitle]="'Search user profiles for finding and matching skillsets for your need. It helps you to find user skills and his profession and educational details.'" [loader]="loader.ELLIPSIS" [iconColor]="'white'" [backdropBackgroundColor]="'black'"> </ngx-http-loader>
To specify the loader type this way, you must reference the NgxLoader const as a public property in your app.component.ts:
import { Component } from "@angular/core";
import { NgxLoader } from "ngx-http-loader"; // <============
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"],
})
export class AppComponent {
public loader = NgxLoader; // <============
}
Available Options
- [loader]: To set different type of loader. Default is
RIPPLE. Enum type is NgxLoader.
- [opacity]: To change opacity of backdrop background. Default is
0.8 number format
- [backdropBackgroundColor]: Set backdrop background color. Default is
'linear-gradient(0deg, black, transparent)'
- [iconColor]: To set loader or svg icon color. Default is
'#fff'
- [title]: To set title below the loader or spinner. Default empty.
- [titleColor]: To set title color. Default
'#fff'
- [titleSize]: For changing title text size. Default
'3rem'.
- [subTitle]: To set sub title or description below the loader or spinner. Default empty.
- [subTitleColor]: To set sub title color. Default
'#fff'
- [subTitleSize]: For changing sub title text size. Default
'1.5rem'.
- [filterUrls]: Pass
Array<string> complete urls with query params to hide loader on calling this http request. Default empty array.
- [filterUrlRegexPatterns]: Pass
Array<RegExp> urls string with regex pattern to hide loader on this urls calling. Default empty array.
- [filterHttpHeaders]: Pass
Array<string> headers. Default empty array.
- [filterHttpMethods]: Pass
Array<string> http methods. Default empty array.
- [custom]:
true or false
To enable/disable add custom loader or image, default false
- [customLoader]: If custom is true this custom loader shows.
- [customTemplate]: Complete custom template. Default is default loader.
Defining your own custom template
- use
[customTemplate] in tag.
- Add your template in
<ng-template #loaderTemplate></ng-template>
- Pass
loaderTemplate to [customTemplate]
<ngx-http-loader [customTemplate]="loaderTemplate">
<ng-template #loaderTemplate>
// Add style in your style.css file or your component css file or else use inline css.
<div id="preloader">
<table id="wrapper">
<tr>
<td>
<img src="assets/image/logo_red.gif" alt="" />
</td>
</tr>
</table>
</div>
</ng-template>
</ngx-http-loader>
Replace your custom loader.
- use
[custom] [customLoader] in tag.
[custom]="true" is need to show the custom loader.- Add your template in
<ng-template #loader></ng-template>
- Pass
loader to [customLoader]
<ngx-http-loader [custom]="true" [customLoader]="loaderTemplate">
<ng-template #loaderTemplate>
// Add style in your style.css file or your component css file or else use inline css.
<style>
img {
width: 800px;
height: 800px;
}
</style>
<img src="assets/image/logo_red.gif" alt="" />
</ng-template>
</ngx-http-loader>
Filters HTTP / XHR requests from interceptor
Filter with complete url with queryparams
<ngx-http-loader [filterUrls]="filterUrls"></ngx-http-loader>
public filterUrls = [
'http://localhost:8080/api/movie',
'http://localhost:8080/api/list?search="Find list of movies"&extra=true'
];
Filter with regex url
<ngx-http-loader [filterUrlRegexPatterns]="filterUrlRegexPatterns"></ngx-http-loader>
public filterUrlRegexPatterns:RegExp[] = [new RegExp('api/movie'), new RegExp('[a-zA-Z]')];
Filter with http headers:
<ngx-http-loader [filterHttpHeaders]="['hEaDeR', 'AnoTheR-HeAdEr']"></ngx-http-loader>
Filter with http methods:
<ngx-http-loader [filterHttpMethods]="['POST', 'DELETE']"></ngx-http-loader>
Manually show and hide the loader
You can manually show and hide the loader if needed. You must use the service NgxHttpLoaderService for this purpose.
import { Component } from "@angular/core";
import { NgxHttpLoaderService } from "ngx-http-loader";
@Component({
selector: "my-component",
templateUrl: "./my.component.html",
styleUrls: ["./my.component.css"],
})
export class MyComponent {
constructor(private ngxhttploader: NgxHttpLoaderService) {
// show the spinner
this.ngxhttploader.show();
// hide the spinner
setTimeout(() => {
this.ngxhttploader.hide();
}, 5000);
}
}
List available type of Loaders
const NgxLoader = {
DEFAULT: "loader-default",
CLOCK: "loader-clock",
DUALRING: "loader-dual-ring",
ELLIPSIS: "loader-ellipsis",
FACEBOOK: "loader-facebook",
GEAR: "loader-gear",
GRID: "loader-grid",
HEART: "loader-heart",
HOURGLASS: "loader-hourglass",
JELLYBOX: "loader-jellybox",
MULTICIRCLE: "loader-multicicle",
RING: "loader-ring",
RIPPLE: "loader-ripple",
ROLLER: "loader-roller",
SPINNER: "loader-spinner",
THREEBOUNCE: "loader-three-bounce",
WATERWAVE: "loader-water-wave",
ROTATINGPLANE: "loader-rotating-plane",
};
Dependencies
- Angular 6 and 6+ Support
- Bootstrap 4 and 4+
Creator
