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 :
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.
This article is originally posted over jsonworld