Add Loader in Angular6 application

While working in any application either web or mobile, Loader is important to look cool. As it provides a different look of the entire application. Since at this decade also there are many places where you will find difficulty to get a better internet connection. In such a condition a loader becomes very important which holds the user to wait and notifies that the request is in process.

Today we will discuss about loader imlementation in angular6 application with ng4-loading-spinner module.

Let's Get Started

Step 1 : create angular basic app

I assume that you are familiar with this task. If not find detail about the angular app creation here.

Step2: Install ng4-loading-spinner

Install the needed package by running below command over terminal


npm install ng4-loading-spinner

Step 3: Update app.module.ts

Open app.module.ts file and add ng4-loading-spinner module to imports. Find the updated file below:


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { Ng4LoadingSpinnerModule } from 'ng4-loading-spinner';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
Ng4LoadingSpinnerModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Step 4: Update app.component.ts

Let's have a look on the updated code below:


import { Component } from '@angular/core';

import { Ng4LoadingSpinnerService } from 'ng4-loading-spinner';

@Component({
selector: 'app-root',
template: '<button (click)="show()">SHOW</button><ng4-loading-spinner> </ng4-loading-spinner>',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor (private spinnerService: Ng4LoadingSpinnerService){}
title = 'angular-loader';

show()
{
this.spinnerService.show();
setTimeout(()=>this.spinnerService.hide(),3000)
}

}

Step 5: Run the app

After making above changes in the file, run the app with npm start. Will see the loader like below :