How To Add Loader/Spinner In Angular 8 Application

In this article, you will learn how to add loader/spinner in angular 8 application.

Introduction

 
In this article, we will learn how we can show the Loader in Angular 8 using Ngx spinner library. Ngx spinner is a library for loading spinner for Angular, which is meant to inform the user that data loading is in progress. Basically Loader is used to show the loading state of data in application.
 
Prerequisites
  • Basic Knowledge of Angular 2 or higher
  • Visual Studio Code
  • Visual studio and SQL Server Management studio
  • Node and NPM installed
  • Bootstrap
Step 1
 
Create an Angular project by using the following command.
  1. ng new Angularloader  
Step 2 
 
Open this project in Visual Studio Code and install bootstrap by using following command
  1. npm install bootstrap --save  
Now open styles.css file and add Bootstrap file reference. To add reference in styles.css file add this line.
  1. @import '~bootstrap/dist/css/bootstrap.min.css';   
Step 3
 
Now install ngx spinner library in this project, to install ngx spinner library use the following command
  1. npm install ngx-spinner --save  
Step 4
 
Now Update app.module.ts
 
Open app.module.ts file and add Import NgxSpinnerModule in the root module, 
  1. import { BrowserModule } from '@angular/platform-browser';  
  2. import { NgModule } from '@angular/core';  
  3. import { AppRoutingModule } from './app-routing.module';  
  4. import { AppComponent } from './app.component';  
  5. import { HttpClientModule } from '@angular/common/http'  
  6. import { EmployeedetailsComponent } from './employeedetails/employeedetails.component';  
  7. import { NgxSpinnerModule } from "ngx-spinner";  
  8. @NgModule({  
  9.   declarations: [  
  10.     AppComponent,  
  11.     EmployeedetailsComponent  
  12.   ],  
  13.   imports: [  
  14.     BrowserModule,  
  15.     AppRoutingModule,  
  16.     HttpClientModule,  
  17.     NgxSpinnerModule  
  18.   ],  
  19.   providers: [],  
  20.   bootstrap: [AppComponent]  
  21. })  
  22. export class AppModule { }  
How To Add Loader/Spinner In Angular 8 Application
 
Step 5
 
Now create a new component by using the following command.
  1. ng g c Employeedetails --spec=false  
Now open employeedetails.component.ts file and import NgxSpinnerService 
  1. import { Component, OnInit } from '@angular/core';  
  2. import { EmployeeService } from "../employee.service";  
  3. import { Employe } from "../employe";  
  4. import { NgxSpinnerService } from "ngx-spinner";  
  5. @Component({  
  6.   selector: 'app-employeedetails',  
  7.   templateUrl: './employeedetails.component.html',  
  8.   styleUrls: ['./employeedetails.component.css']  
  9. })  
  10. export class EmployeedetailsComponent implements OnInit {  
  11.   emp: any;  
  12.   constructor(private employeeService: EmployeeService,  
  13.     private SpinnerService: NgxSpinnerService) { }  
  14.   
  15.   ngOnInit() {  
  16.     this.GetemployeeDetails();  
  17.   }  
  18.   GetemployeeDetails() {  
  19.     this.SpinnerService.show();  
  20.     this.employeeService.GetemployeeDetails().subscribe((data: any) => {  
  21.       this.emp = data;  
  22.       console.log(this.emp);  
  23.        this.SpinnerService.hide();  
  24.     });  
  25.   }  
  26. }  
How To Add Loader/Spinner In Angular 8 Application
 
Open employeedetails.component.html file and following lines
  1. <div>    
  2.     <div class="row" style="margin-top:10px;margin-bottom: 10px;">    
  3.       <div class="col-sm-12 btn btn-success">    
  4.         Loader in Angular Application with Dynamic  Data     
  5.       </div>    
  6.     </div>    
  7.     <div class="row" style="margin-top:10px;margin-bottom: 10px;">    
  8.     </div>    
  9.   </div>    
  10.   <hr style="background-color:black" />    
  11.   
  12. <div>  
  13.     <table class="table table-dark table-striped">  
  14.       <thead>  
  15.         <tr>  
  16.           <th>Id</th>  
  17.           <th>Name</th>  
  18.           <th>Age</th>  
  19.           <th>Address</th>  
  20.           <th>City</th>  
  21.           <th>ContactNum</th>  
  22.           <th>Salary</th>  
  23.           <th>Department</th>  
  24.         </tr>  
  25.       </thead>  
  26.       <tbody>  
  27.         <tr *ngFor="let e of emp">  
  28.           <td>{{e.Id}}</td>  
  29.           <td>{{e.Name}}</td>  
  30.           <td>{{e.Age}}</td>  
  31.           <td>{{e.Address}}</td>  
  32.           <td>{{e.City}}</td>  
  33.           <td>{{e.ContactNum}}</td>  
  34.           <td>{{e.Salary}}</td>  
  35.           <td>{{e.Department}}</td>  
  36.         </tr>  
  37.       </tbody>  
  38.     </table>  
  39.   </div>  
  40.   <ngx-spinner bdColor="rgba(51, 51, 51, 0.8)" size="default" type="ball-spin-clockwise">  
  41.     <p style="color: white">Please Wait. </p>  
  42.     </ngx-spinner>    
Step 6
 
Create a new class using following command,
  1. ng g class  Employe --spec=false  
Now open employe.ts file and add the following line in this class
  1. export class Employe {  
  2.     Id:number;  
  3.     Name:any;  
  4.     Age:any;  
  5.     Address:any;  
  6.     City:any;  
  7.     ContactNum:number;  
  8.     Salary:number;  
  9.     Department:any;  
  10. }  
Step 7
 
Create a new service using following command
  1. ng g s Employee --spec=false  
Now open employee.service.ts file and add following lines
  1. import { Injectable } from '@angular/core';  
  2. import { HttpClient } from "@angular/common/http";  
  3. @Injectable({  
  4.   providedIn: 'root'  
  5. })  
  6. export class EmployeeService {  
  7.   url:any;  
  8.   constructor(private http:HttpClient ) {   
  9.   
  10.   }  
  11.   GetemployeeDetails()  
  12.   {  
  13.     this.url='http://localhost:56932/api/Employee/Employeedetails';  
  14.     return this.http.get(this.url);  
  15.   }  
  16. }   
Step 8 - Create database and a table 
 
Open SQL Server Management Studio, create a database named "Employee", and in this database, create a table. Give that table a name like "employee".
  1. CREATE TABLE [dbo].[Employee](    
  2.     [Id] [int] IDENTITY(1,1) NOT NULL,    
  3.     [Name] [varchar](50) NULL,    
  4.     [Age] [intNULL,    
  5.     [Address] [varchar](50) NULL,    
  6.     [City] [varchar](50) NULL,    
  7.     [ContactNum] [varchar](50) NULL,    
  8.     [Salary] [decimal](18, 0) NULL,    
  9.     [Department] [varchar](50) NULL,    
  10.  CONSTRAINT [PK_Employee] PRIMARY KEY CLUSTERED     
  11. (    
  12.     [Id] ASC    
  13. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ONON [PRIMARY]    
  14. ON [PRIMARY]    
  15.     
  16. GO    
  17.     
  18. SET ANSI_PADDING OFF    
  19. GO     

Create a new Web API project

 
Step 9
 
Open Visual Studio and create a new project.
 
How To Add Loader/Spinner In Angular 8 Application
 
Step 10
 
Change the name to LoaderDemo
 
How To Add Loader/Spinner In Angular 8 Application
 
Step 11
 
Choose the template as Web API. 
 
How To Add Loader/Spinner In Angular 8 Application
 
Step 12
 
Right-click the Models folder from Solution Explorer and go to Add >> New Item >> data.
 
How To Add Loader/Spinner In Angular 8 Application
 
Step 13
 
Click on the "ADO.NET Entity Data Model" option and click "Add".
 
How To Add Loader/Spinner In Angular 8 Application
 
Step 14
 
Select EF Designer from the database and click the "Next" button.
 
How To Add Loader/Spinner In Angular 8 Application
 
Step 15
 
Add the connection properties and select database name on the next page and click OK. 
 
How To Add Loader/Spinner In Angular 8 Application
 
Step 16
 
Check the "Table" checkbox. The internal options will be selected by default. Now, click the "Finish" button. 
 
How To Add Loader/Spinner In Angular 8 Application
 
Step 17
 
Right-click on the Controllers folder and add a new controller. Name it as "Employee controller" and add the following namespace in the Employee controller. 
  1. using LoaderDemo.Models;  
Step 18
 
Now, add a method to fetch data from database.
 
Employee controller 
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Net;  
  5. using System.Net.Http;  
  6. using System.Web.Http;  
  7. using LoaderDemo.Models;  
  8.   
  9. namespace LoaderDemo.Controllers  
  10. {  
  11.     [RoutePrefix("Api/Employee")]  
  12.     public class EmployeeController : ApiController  
  13.     {  
  14.         [Route("Employeedetails")]  
  15.         [HttpGet]  
  16.         public object Studentdetails()  
  17.        {  
  18.             EmployeeEntities DB = new EmployeeEntities();  
  19.             var emp = DB.Employees.ToList();  
  20.             return emp;  
  21.         }  
  22.     }  
  23. }  
Step 19
 
Now, let's enable CORS. Go to Tools, open NuGet Package Manager, search for CORS, and install the "Microsoft.Asp.Net.WebApi.Cors" package. Open Webapiconfig.cs and add the following lines.
  1. EnableCorsAttribute cors = new EnableCorsAttribute("*""*""*");      
  2. config.EnableCors(cors);     
Step 20
 
Now run the project and check result
 
How To Add Loader/Spinner In Angular 8 Application
 
When data is load, the loader is hidden.

How To Add Loader/Spinner In Angular 8 Application

Summary

 
In this article, we learned how we add Loader in Angular application with dynamic data load.