@ngx-loading-bar
A fully automatic loading bar with zero configuration for angular app (http, http-client and router).
Packages
- @ngx-loading-bar/router - Display loading bar when navigating between routes.
- @ngx-loading-bar/http-client - Display the progress of your
@angular/common/http
requests. - @ngx-loading-bar/http - Display the progress of your
@angular/http
requests. - @ngx-loading-bar/core - Core module to manage the progress bar manually.
Demo
- online demo: https://angular-sypacw.stackblitz.io
- demo-app: Example utilizing all @ngx-loading-bar libraries.
Quick Start
1. Install one or all @ngx-loading-bar libraries:
# if you use `@angular/common/http` npm install @ngx-loading-bar/http-client --save # if you use `@angular/http` npm install @ngx-loading-bar/http --save # if you use `@angular/router` npm install @ngx-loading-bar/router --save # to manage loading-bar manually npm install @ngx-loading-bar/core --save
LoadingBarHttpClientModule
, LoadingBarHttpModule
, LoadingBarRouterModule
or LoadingBarModule
):
2. Import the installed libraries (;; ; // for Http import LoadingBarHttpModule:// import { LoadingBarHttpModule } from '@ngx-loading-bar/http'; // for Router import LoadingBarRouterModule:// import { LoadingBarRouterModule } from '@ngx-loading-bar/router'; // for Core import LoadingBarModule:// import { LoadingBarModule } from '@ngx-loading-bar/core'; ;
ngx-loading-bar
in your app component:
3. Include ;
4. include the supplied CSS file (or create your own).
Manually manage loading service
LoadingBarModule
1. Import the ; ;
2. Inject/Use LoadingBarService
;;
Advanced
When you import LoadingBarHttpModule, http service observables become hot. That means that a HTTP request is sent as soon as a call to http.get (for example) has been made.
;;
This behavior is because the Loading bar module overrides default http service by setting up a subscription to the request. This subscription fires up the HTTP request.
If this behavior doesn't suit you, you should manage loading bar manually as in the component startHttpRequest above.