Add Loader in Angular6 application

    Apr 15, 2019       by Pankaj Kumar

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 :

loader

 

Conclusion

So in this demo, We  learn to add loader in the angular application very easily. Find here other angular6-sample-application here

 

That’s all for now. Thank you for reading and I hope this demo will be very helpful to understand create loader in angular6 application.

Let me know your thoughts over the email demo.jsonworld@gmail.com. I would love to hear them and If you like this article, share with your friends.

angular6

WHAT'S NEW

image
JavaScript Complete Guide in Hindi(Free Tutorial)

Click to Watch

Find other similar Articles here:

WHAT'S NEW

image
JavaScript Complete Guide in Hindi(Free Tutorial)

Click to Watch
CATEGORIES
INTERVIEW QUESTIONS