ngx-http-loader
v16.0.0TypeScript
Angular Loader or Spinner. Supports http interceptor, custom loader, complete custom template, title subtitle, colors, font size, filters urls, methods etc.
0/weekUpdated 2 years agoMITUnpacked: 277.9 KB
Published by Bhushan Zade
npm install ngx-http-loader
NGX HTTP LOADER
![npm]()
![npm]()
![npm]()
![License]()
![Support]()
![Support]()
![Support]()
![Support]()
![Support]()
![Support]()
![Support]()
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
Demo live site
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:
`typescript
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:
`html`
_To specify the loader type this way, you must reference the NgxLoader const as a public property in your app.component.ts_:
`typescript
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.0.8
- [opacity]: To change opacity of backdrop background. Default is number format'linear-gradient(0deg, black, transparent)'
- [backdropBackgroundColor]: Set backdrop background color. Default is
- [iconColor]: To set loader or svg icon color. Default is
- [title]: To set title below the loader or spinner. Default empty.
- [titleColor]: To set title color. Default
- [titleSize]: For changing title text size. Default .'#fff'
- [subTitle]: To set sub title or description below the loader or spinner. Default empty.
- [subTitleColor]: To set sub title color. Default
- [subTitleSize]: For changing sub title text size. Default .Array
- [filterUrls]: Pass complete urls with query params to hide loader on calling this http request. Default empty array.Array
- [filterUrlRegexPatterns]: Pass urls string with regex pattern to hide loader on this urls calling. Default empty array.Array
- [filterHttpHeaders]: Pass headers. Default empty array.Array
- [filterHttpMethods]: Pass http methods. Default empty array.true
- [custom]: or false
To enable/disable add custom loader or image, default
- [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
- Pass to [customTemplate]
`html`
// Add style in your style.css file or your component css file or else use inline css.
Replace your custom loader.
- use [custom] [customLoader] in tag.[custom]="true"
- is need to show the custom loader.
- Add your template in
- Pass to [customLoader]
`html`
// Add style in your style.css file or your component css file or else use inline css.
Filters HTTP / XHR requests from interceptor
_Filter with complete url with queryparams_
`html`
`ts`
public filterUrls = [
'http://localhost:8080/api/movie',
'http://localhost:8080/api/list?search="Find list of movies"&extra=true'
];
_Filter with regex url_
`html`
`ts`
public filterUrlRegexPatterns:RegExp[] = [new RegExp('api/movie'), new RegExp('[a-zA-Z]')];
_Filter with http headers_:
`html`
_Filter with http methods_:
`html`
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.
`ts
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
`ts``
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
---
#### Bhushan Zade