Angular 6 Slim Loading Bar - Learn Java by Examples

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

<!-- 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>

Create Product

</a>

</li>

All Products

</a>

</li>

</ul>

</div>

</nav>

<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.

npm install rxjs-compat --save

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.

npm install ng2-slim-loading-bar --save

1	npm install ng2-slim-loading-bar --save

We have to register this module inside an app.module.ts file.

// app.module.ts

import { SlimLoadingBarModule } from 'ng2-slim-loading-bar';

imports: [
    BrowserModule,
    RouterModule.forRoot(routes),
    SlimLoadingBarModule
 ]

// 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.

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

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.

// 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();
    }
  }
}

// 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 directive in the app.component.html file

<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>