Post
Ask Question

Creating Modern Page Loader Using Angular 6

You will have seen page loader on the top of the page on various websites when we navigate from one page to another page or one post to another post. I have also seen it on some websites like Angular Official Website, YouTube and many others. I have also worked on a few Angular projects in the last couple of months where this type of page loader has been used a lot. I would like to share small-2 code snippets that will let you focus on one specific functionality. In this article, we will create a page loader using router events.

Output

Page loader will look like this,

 Output

Implementation

For creating page loader, we need to install the ng2-slim-loading-bar package using the following command–

npm install –save ng2-slim-loading-bar

After installing the package, import SlimLoadingBarModule from ng2-slim-loading-bar and add it under imports array in the app.module.ts file. (See below)

  1. imports: [      
  2.     SlimLoadingBarModule.forRoot()  
  3.   ],  

Also, import ng2-slim-loading-bar style-sheet into global styles.css file (see below)

  1. @import '../node_modules/ng2-slim-loading-bar/style.css';  

Now, add ng2-slim-loading-bar tag in app component. App.component.html file will look like below – (See below)

  1. <ng2-slim-loading-bar></ng2-slim-loading-bar>  
  2. <nav class="navbar navbar-default">  
  3.   <div class="container-fluid">  
  4.     <div class="collapse navbar-collapse">  
  5.       <ul class="nav navbar-nav">  
  6.         <li routerLinkActive="active current"><a routerLink="/">Home</a></li>  
  7.         <li routerLinkActive="active current"><a routerLink="/userposts">User Posts</a></li>  
  8.         <li routerLinkActive="active current"><a routerLink="/bloggers">Bloggers</a></li>  
  9.         <li routerLinkActive="active current"><a routerLink="/contact-us">Contact Us</a></li>  
  10.       </ul>  
  11.     </div>  
  12.   </div>  
  13. </nav>  
  14. <router-outlet></router-outlet>  

Also, import SlimLoadingBarService from ng2-slim-loading-bar package in the app.component.ts file.

  1. import { SlimLoadingBarService } from "ng2-slim-loading-bar";  
Adding Router Events

In Angular routing, when we navigate from one component/page to another component/page, there are al lot of events triggered during this navigation process. (See below for a few of them)

  • NavigationStart
  • RoutesRecognized
  • GuardsCheckStart
  • ChildActivationStart
  • ActivationStart
  • GuardsCheckEnd
  • ResolveStart
  • ResolveEnd
  • ActivationEnd
  • ChildActivationEnd
  • NavigationEnd

Check Angular official documentation here for more detail.

We will import and use two of those router events (NavigationStart & NavigationEnd) to trigger the page loader. We will subscribe to the router’s events so that we can  show a loading bar based on the current state of router navigation. After adding router events, App.component.ts code file will look like this,

  1. import { Component } from "@angular/core";  
  2. import { SlimLoadingBarService } from "ng2-slim-loading-bar";  
  3. import {  
  4.   NavigationStart,  
  5.   NavigationEnd,  
  6.   Event,  
  7.   Router  
  8. } from "@angular/router";  
  9.   
  10. @Component({  
  11.   selector: "app-root",  
  12.   templateUrl: "./app.component.html",  
  13.   styleUrls: ["./app.component.css"]  
  14. })  
  15. export class AppComponent {  
  16.   title = "App Component Works";  
  17.   
  18.   constructor(  
  19.     private lBar: SlimLoadingBarService,  
  20.     private _router: Router  
  21.   ) {  
  22.     this._router.events.subscribe((event: Event) => {  
  23.       console.log(event);  
  24.       this.loadingBarInterceptor(event);  
  25.     });  
  26.   }  
  27.   
  28.   private loadingBarInterceptor(event: Event) {  
  29.     if (event instanceof NavigationStart) {  
  30.       this.lBar.start();  
  31.     }  
  32.     if (event instanceof NavigationEnd) {  
  33.       this.lBar.complete();  
  34.     }      
  35.   }  
  36. }  

As per the above code, when route event NavigationStart triggers, we will start showing the loading bar. And when route event NavigationEnd triggers, we will stop showing loading bar.

Now, run your application and see how the page loader works on the live application.

Summary

Through this article, we have learned how to create a page loader (just like YouTube or Angular.io) in Angular 2/4/5/6/7 using Router events.

Write to me in the comment box in case you need any help or you have any questions or concerns. Have a good day!


Similar Articles