To create a routing loading indicator in Angular, use the Angular router service and ng2-slim-loading-bar on its Github Library. 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 event.
Here are the steps to display a loading indicator when navigating between routes
Step 1. Set up the Development Environment
Install the Angular CLI globally if you have not installed it previously.
npm install -g @angular/cli
If it does not install, then try in administrator mode.
Create a new application using the following command.
ng new ngindicator
Go into the project directory.
cd ngindicator
To start the development server, type the following command.
ng serve --open
Step 2: Install the ng2-slim-loading-bar library.
The goal of this tutorial is that when we navigate to different routing components, we see the loading indicator. So, we need to install an ng2-slim-loading-bar library for that.
Install using the following cmd.
npm install ng2-slim-loading-bar --save
One of the significant changes in Angular is that Angular now depends on TypeScript above 3.8 and RxJS above 6.5.5. So, if you install third-party packages right now, it is not compatible with Angular.
We must install the following library to bridge the gap between Angular and third-party packages. That is it.
npm i rxjs-compat --save
Import the SlimLoadingBarModule inside the app.module.ts file.
// app.module.ts
import { SlimLoadingBarModule } from 'ng2-slim-loading-bar';
imports: [
BrowserModule,
SlimLoadingBarModule
],
The next step is to include the styling with the library inside the 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
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.
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. Next, we create an array containing these three components and register the routes in our Angular application. Thus, our whole app.module.ts file looks like the one 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 { }
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
Copy the bootstrap.min.css file from the node_modules/bootstrap/dist/css directory and paste it inside the 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
Write the following code inside the 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(); } } }
The above writing code means that when the NavigationStart event occurs, the loadingBar object calls its start() method, and we can see the loading indicator. Now, when the NavigationEnd, the loadingBar calls its complete() method.
If the NavigationCancel or NavigationError event occurs, the loadingBar’s stop() function will run—so there is a simple logic behind showing the navigation progress bar.
That’s it!
Robin Singh
Why u use third party library bro,
i want to use angular material library. is it same as this??
balendu
how can we change its color