馃敻 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!! 馃槉