AppDividend
Latest Code Tutorials

Angular Routing Progress Indicator Tutorial

2,518

Get real time updates directly on you device, subscribe now.

Angular Routing Progress Indicator Tutorial is the today’s main topic. 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 Angular 6 because it is in the stable version now. So let us start our Angular Routing Progress Indicator Tutorial. You can find more about ng2-slim-loading-bar on its Github Library.

Final Output

 

Angular Routing Progress Indicator Tutorial

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

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 change in Angular 6 is that Angular 6 now depends on TypeScript 2.7 and RxJS 6. So, if you install third-party packages right now, then it is not compatible with Angular 6.

To bridge the gap between Angular 6 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 app.module.ts file. So we do not need to update it manually.

Now, configure the routes for these three components. Inside 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 app.module.ts file and now create an array that contains these three components and then register the routes in our Angular 6 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 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

 

Above image is 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 Routing Progress Indicator Tutorial is over here. I am putting this code on Github, so please checkout 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.