In this post Angular 6 Slim Loading Bar, we introduce about how to add loading bar in Angular application. We have a delay between the moment when we navigate to a route, and the moment that our component is displayed. If we use loading bar to notify the user that something is happening in the background can greatly improve the User Experience.
Now, let’s create a simple angular application with a slim loading indicator.
Add Navigation
Add the navigation to navigate between the different routes (here is “create” and “index”) in an Angular application
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!-- app.component.html --> <nav class="navbar navbar-expand-sm bg-light"> <div class="container-fluid"> <ul class="navbar-nav"> <li class="nav-item"> <a routerLink="create" class="nav-link" routerLinkActive="active"> Create Product </a> </li> <li class="nav-item"> <a routerLink="index" class="nav-link" routerLinkActive="active"> All Products </a> </li> </ul> </div> </nav> <div class="container"> <router-outlet></router-outlet> </div> |
Add Angular Routing Progress Indicator
RxJS 6 is mostly used in Angular apps, and starting with Angular 6, it’s a mandatory dependency there. So we need to install one library called rxjs-compat.
|
1 |
npm install rxjs-compat --save |
The goal of this article is to show you how to display a loading indicator when navigating from one route to another. So we install the ng2-slim-loading-bar library.
|
1 |
npm install ng2-slim-loading-bar --save |
We have to register this module inside an app.module.ts file.
|
1 2 3 4 5 6 7 8 9 |
// app.module.ts import { SlimLoadingBarModule } from 'ng2-slim-loading-bar'; imports: [ BrowserModule, RouterModule.forRoot(routes), SlimLoadingBarModule ] |
Then, import the styles of ng2-slim-loading-bar inside src>>styles.css file.
|
1 |
@import "../node_modules/ng2-slim-loading-bar/style.css"; |
Now, we implement how loading bar works in our application by using the following code inside an app.component.ts file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
// app.component.ts import { Component } from '@angular/core'; import {SlimLoadingBarService} from 'ng2-slim-loading-bar'; import { NavigationCancel, Event, NavigationEnd, NavigationError, NavigationStart, Router } from '@angular/router'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'Angular6App'; constructor(private _loadingBar: SlimLoadingBarService, private _router: Router) { this._router.events.subscribe((event: Event) => { this.navigationInterceptor(event); }); } private navigationInterceptor(event: Event): void { if (event instanceof NavigationStart) { this._loadingBar.start(); } if (event instanceof NavigationEnd) { this._loadingBar.complete(); } if (event instanceof NavigationCancel) { this._loadingBar.stop(); } if (event instanceof NavigationError) { this._loadingBar.stop(); } } } |
Finally, We need to add
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<ng2-slim-loading-bar color="blue"></ng2-slim-loading-bar> <nav class="navbar navbar-expand-sm bg-light"> <div class="container-fluid"> <ul class="navbar-nav"> <li class="nav-item"> <a routerLink="create" class="nav-link" routerLinkActive="active"> Create Product </a> </li> <li class="nav-item"> <a routerLink="index" class="nav-link" routerLinkActive="active"> All Products </a> </li> </ul> </div> </nav> <div class="container"> <router-outlet></router-outlet> </div> |
Save the changes, and we back to the browser and see the routing indicator when we do click on the navigation bar “Create Product” or “All Products”.
That’s all about the post Angular 6 Slim Loading Bar.
References
Angular – Routing & Navigation
Download the complete source code, click link below
Angular6SlimLoadingBarApp.zip (186 downloads)
