AppDividend
Latest Code Tutorials

Angular 9/8/7/6 Routing Progress Indicator Example

2

We can display a progress bar at the start of every navigation and hide it when the navigation is complete. The Angular Router service gives us access to an Observable of all navigation events via its events property. We can subscribe to that Observable, and act accordingly depending on the type of the event.

Proper tools make application development quicker and easier to maintain if you did everything by hand. The Angular CLI is a command-line interface tool that can create a project, add files, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.

In this example, I have used you can use any Angular version. You can use Angular 9/8/7/6. 

So let us start our Angular Routing Progress Indicator example. You can find more about ng2-slim-loading-bar on its Github Library.

Final Output

Angular Routing Progress Indicator

As always, we start our tutorial by installing the Angular.

Step 1. Set up the Development Environment

Install the Angular CLI globally, if you have not installed in previously.

npm install -g @angular/cli

If it does not install then try in administrator mode.

Now, after that, create a new application using the following command.

ng new ngindicator

Go into the project directory.

cd ngindicator

Now, open the project in your favorite editor. I am using VSCode.

code .

To start the development server, type the following command.

ng serve --open

Step 2: Install ng2-slim-loading-bar library.

Our goal of this tutorial is that, when we navigate to different routing components, we see the loading indicator. So for that, we need to install an ng2-slim-loading-bar library.

So, install using the following cmd.

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

Now, one of the significant changes in Angular 9 is that Angular 9 now depends on TypeScript 3.8 and RxJS 6.5.5. So, if you install third-party packages right now, then it is not compatible with Angular 9.

To bridge the gap between Angular 9 and third-party packages, we need to install the following library. That is it.

npm i rxjs-compat --save

Now, import the SlimLoadingBarModule inside the app.module.ts file.

// app.module.ts

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

imports: [
    BrowserModule,
    SlimLoadingBarModule
],

Next step is, include the styling that comes with the library inside src  >>  styles.css file.

// styles.css

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

Step 3: Create three components.

Go to the terminal and create three components using the following commands.

ng g c mobile -it -is --spec false
ng g c tv -it -is --spec false
ng g c ac -it -is --spec false

Now, we do not need the test files for this example. Also, it automatically includes the component dependencies inside the app.module.ts file. So we do not need to update it manually.

Now, configure the routes for these three components. Inside the app.module.ts file, write the following code.

// app.module.ts

import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'mobile',
    component: MobileComponent
  },
  {
    path: 'tv',
    component: TvComponent
  },
  {
    path: 'ac',
    component: AcComponent
  }
];

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

We have already included three components inside the app.module.ts file and now create an array that contains these three components and then register the routes in our Angular 9 application.

So our whole app.module.ts file looks like below.

// app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { SlimLoadingBarModule } from 'ng2-slim-loading-bar';

import { AppComponent } from './app.component';
import { MobileComponent } from './mobile/mobile.component';
import { TvComponent } from './tv/tv.component';
import { AcComponent } from './ac/ac.component';

const routes: Routes = [
  {
    path: 'mobile',
    component: MobileComponent
  },
  {
    path: 'tv',
    component: TvComponent
  },
  {
    path: 'ac',
    component: AcComponent
  }
];

@NgModule({
  declarations: [
    AppComponent,
    MobileComponent,
    TvComponent,
    AcComponent
  ],
  imports: [
    BrowserModule,
    SlimLoadingBarModule,
    RouterModule.forRoot(routes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now, write the following code inside an app.component.html file.

Step 4: Add Bootstrap 4 to our Angular application.

Go to your project root and install bootstrap 4 using the following command.

npm install bootstrap@4.0.0 --save

Now, copy the bootstrap.min.css file from node_modules/bootstrap/dist/css directory and paste inside src >>  assets folder. 

In the src >>  index.html file, add the bootstrap css file.

<link rel="stylesheet" href="assets/bootstrap.min.css">

Step 5: Add Navigation to our application.

Inside the app.component.html file, we need to add the bootstrap 4 classes.

<ng2-slim-loading-bar color="blue"></ng2-slim-loading-bar>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
          <a routerLink="mobile" class="nav-link">Mobile</a>
      </li>
      <li class="nav-item active">
          <a routerLink="tv" class="nav-link">TV</a>
      </li>
      <li class="nav-item active">
          <a routerLink="ac" class="nav-link">AC</a>
      </li>
    </ul>
  </div>  
</nav> <br />
<div class="container">
    <router-outlet></router-outlet>
</div>

Step 6: Adding Router Events.

Angular RouterModule gives us the following event modules.

  • NavigationStart
  • NavigationEnd
  • NavigationError
  • NavigationCancel
  • Router
  • Event

Now, write the following code inside 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 = 'app';

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

So, what the above writing code’s meaning is that when the NavigationStart event occurs then loadingBar object calls its start() method and we can see the loading indicator. Now, when the NavigationEnd then the loadingBar call its complete() method.

If NavigationCancel or NavigationError event occurs then loadingBar’s stop() function will run. So simple logic behind show the navigation progress bar.

Angular Routing Progress Indicator Tutorial

The above image is the simple interface we have built in this example. If you are navigating to other nav items then you can see the routing indicator. So Angular 9/8/7/6 Routing Progress Indicator Example is over here. I am putting this code on Github, so please checkout as well.

In Github code, my angular version is older but you can still run this whole code in Angular’s latest version as well.

Fork Me On Github

2 Comments
  1. Robin Singh says

    Why u use third party library bro,
    i want to use angular material library. is it same as this??

  2. balendu says

    how can we change its color

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.