🔸 Introduction
Today I come to show you a library that helps us show a progress bar, which will be shown in every http request we make on our Angular website, I consider this functionality essential since it is a very visual way to show the progress of loading of the request to the user of our website.
🔸 Installation
# if you use `@angular/common/http`
npm install @ngx-loading-bar/core @ngx-loading-bar/http-client --save
# if you use `@angular/router`
npm install @ngx-loading-bar/core @ngx-loading-bar/router --save
# to manage loading-bar manually
npm install @ngx-loading-bar/core --save
🔸 Import @ngx-loading-bar packages
We must import the packages previously installed in our app.module.ts.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// for HttpClient import:
import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client';
// for Router import:
import { LoadingBarRouterModule } from '@ngx-loading-bar/router';
// for Core import:
import { LoadingBarModule } from '@ngx-loading-bar/core';
import { AppComponent } from './app';
@NgModule({
...
imports: [
...
// for HttpClient use:
LoadingBarHttpClientModule,
// for Router use:
LoadingBarRouterModule,
// for Core use:
LoadingBarModule
],
})
export class AppModule {}
🔸 Add to your app component
Use your ngx-loading-bar in your app.component.html template:
<ngx-loading-bar color="#CD67BA" height="4px"></ngx-loading-bar>
🔸 Demo in my portfolio
Show more in me Portfolio.
🔸 Customize with the following entries
| Input | Description |
|---|---|
| color | The color of loading bar. Default value is #29d. |
| includeSpinner | Hide or show the Spinner. Default value is true. |
| includeBar | Hide or show the Bar. Default value is true. |
| height | The height of loading bar. Default value is 2px. |
| diameter | The diameter of the progress spinner. Default value is 14px. |
| fixed | set loading bar on the top of the screen or inside a container. Default value is true. |
| value | Set the value of the progress bar. |
| ref | Select the ref of a loading bar instance to display (http, router, ...) |
🔸 Ignoring particular requests
http-client:
Http client doesn't allow passing custom option, in order to achieve that we made a temporary solution (by passing the option throught the header) that will be removed once http-client come with a proper solution.
// ignore a particular $http GET:
httpClient.get('/status', {
headers: { ignoreLoadingBar: '' }
});
router:
- using the
router.navigateByUrl()method:
this.router.navigateByUrl('/custom-path', { state: { ignoreLoadingBar: true } });
- using the
routerLinkdirective:
<a routerLink="/custom-path" [state]="{ ignoreLoadingBar: true }">Go</a>
🔸 Source and more information on ngx-loading-bar
GitHub ngx-loading-bar repo here.
Thanks for reading me. 😊
Top comments (8)
I want to hide loading spinner, includeSpinner="false" is not working.
Did you try this way? [includeSpinner] = "false"
That's too quick response, now it is working properly thank you
Thanks to you for your question 😊 👍
It's not working and instead throws the below error while building an application:
Anybody found a solution for this?
Angular version: 8
Just the article I was looking for. Thanks!
Thanks!! 😊