How To Load A Spinner Till Data Loads In To Ui In Angular 5

Introduction

In this article, we will learn how nosotros tin show the Loader in Angular eight 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 bear witness the loading country of data in awarding.

Prerequisites

• Basic Noesis of Angular 2 or higher
• Visual Studio Lawmaking
• Visual studio and SQL Server Direction studio
• Node and NPM installed
• Bootstrap

Pace i

Create an Athwart project past using the following command.

1. ng new  Angularloader

Footstep 2

Open this projection in Visual Studio Code and install bootstrap by using following command

1. npm install bootstrap --salve

At present open styles.css file and add Bootstrap file reference. To add reference in styles.css file add together this line.

1. @import '~bootstrap/dist/css/bootstrap.min.css' ;

Step 3

At present install ngx spinner library in this projection, to install ngx spinner library use the following command

1. npm install ngx-spinner --save

Footstep 4

Now Update app.module.ts

Open app.module.ts file and add together 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. exportcourse  AppModule { }

Step 5

Now create a new component past using the post-obit command.

1. ng one thousand c Employeedetails --spec= imitation

Now open up employeedetails.component.ts file and import NgxSpinnerService

1. import { Component, OnInit } from '@athwart/cadre' ;
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. exportcourse  EmployeedetailsComponent implements OnInit {
11.   emp: any;
12.   constructor(private  employeeService: EmployeeService,
13. private  SpinnerService: NgxSpinnerService) { }
15.   ngOnInit() {
16. this .GetemployeeDetails();
17.   }
18.   GetemployeeDetails() {
19. this .SpinnerService.bear witness();
20. this .employeeService.GetemployeeDetails().subscribe((data: any) => {
21. this .emp = data;
22.       console.log(this .emp);
23. this .SpinnerService.hide();
24.     });
25.   }
26. }

Open up employeedetails.component.html file and following lines

1. <div>
2.     <divclass = "row"  mode= "margin-top:10px;margin-bottom: 10px;" >
3.       <divclass = "col-sm-12 btn btn-success" >
4.         Loader in Athwart Application with Dynamic  Data
5.       </div>
6.     </div>
7.     <divclass = "row"  style= "margin-top:10px;margin-bottom: 10px;" >
8.     </div>
9.   </div>
10.   <hr style="groundwork-color:blackness"  />
12. <div>
13.     <tabular arrayclass = "table table-dark table-striped" >
14.       <thead>
15.         <tr>
16.           <th>Id</thursday>
17.           <th>Proper name</th>
18.           <th>Age</th>
19.           <thursday>Address</th>
20.           <th>City</th>
21.           <th>ContactNum</th>
22.           <th>Salary</th>
23.           <th>Section</th>
24.         </tr>
25.       </thead>
26.       <tbody>
27.         <tr *ngFor="let e of emp" >
28.           <td>{{eastward.Id}}</td>
29.           <td>{{due east.Proper name}}</td>
30.           <td>{{e.Age}}</td>
31.           <td>{{eastward.Address}}</td>
32.           <td>{{e.City}}</td>
33.           <td>{{e.ContactNum}}</td>
34.           <td>{{eastward.Bacon}}</td>
35.           <td>{{due east.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 manner="color: white" >Please Wait. </p>
42.     </ngx-spinner>

Step 6

Create a new class using following control,

1. ng g grade   Employe --spec= false

Now open up employe.ts file and add together the following line in this class

1. consign form  Employe {
2.     Id:number;
3.     Name:any;
4.     Age:any;
5.     Address:whatever;
6.     City:any;
7.     ContactNum:number;
8.     Salary:number;
9.     Department:any;
10. }

Pace 7

Create a new service using following command

1. ng g s Employee --spec= imitation

At present 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. exportform  EmployeeService {
7.   url:any;
8.   constructor(private  http:HttpClient ) {
10.   }
11.   GetemployeeDetails()
12.   {
13. this .url= 'http://localhost:56932/api/Employee/Employeedetails' ;
14. return this .http.get( this .url);
15.   }
16. }

Footstep 8 - Create database and a table

Open up SQL Server Management Studio, create a database named "Employee", and in this database, create a table. Give that tabular array a name like "employee".

1. CREATE TABLE  [dbo].[Employee](
2.     [Id] [int ] IDENTITY(1,1) NOT NULL ,
3.     [Proper noun ] [ varchar ](fifty) NULL ,
4.     [Age] [int ] Nothing ,
5.     [Address] [varchar ](50) NULL ,
6.     [City] [varchar ](50) Cypher ,
7.     [ContactNum] [varchar ](50) Zip ,
8.     [Bacon] [decimal ](18, 0) Aught ,
9.     [Department] [varchar ](fifty) Goose egg ,
10. CONSTRAINT  [PK_Employee] Main KEY  Amassed
11. (
12.     [Id]ASC
13. )WITH  (PAD_INDEX = OFF , STATISTICS_NORECOMPUTE = OFF , IGNORE_DUP_KEY = OFF , ALLOW_ROW_LOCKS = ON , ALLOW_PAGE_LOCKS = ON ) ON  [ Master ]
14. )ON  [ PRIMARY ]
16. GO
18. SET  ANSI_PADDING OFF
19. Go

Create a new Web API projection

Stride 9

Open Visual Studio and create a new projection.

Step x

Modify the name to LoaderDemo

Footstep 11

Choose the template equally Spider web API.

Stride 12

Right-click the Models folder from Solution Explorer and go to Add >> New Particular >> data.

Step 13

Click on the "ADO.NET Entity Data Model" pick and click "Add".

Footstep 14

Select EF Designer from the database and click the "Side by side" push button.

Step 15

Add the connection properties and select database name on the next page and click OK.

Step xvi

Bank check the "Tabular array" checkbox. The internal options will be selected by default. Now, click the "Finish" push.

Footstep 17

Correct-click on the Controllers folder and add a new controller. Proper noun it as "Employee controller" and add together the following namespace in the Employee controller.

1. using  LoaderDemo.Models;

Footstep eighteen

At present, add together a method to fetch information from database.

Employee controller

1. using  Organization;
2. using  System.Collections.Generic;
3. using  Organisation.Linq;
4. using  System.Cyberspace;
5. using  System.Net.Http;
6. using  Arrangement.Web.Http;
7. using  LoaderDemo.Models;
9. namespace  LoaderDemo.Controllers
10. {
11.     [RoutePrefix("Api/Employee" )]
12. public course  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. }

Pace xix

At present, let's enable CORS. Go to Tools, open NuGet Parcel 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 xx

Now run the projection and check issue

When data is load, the loader is hidden.

Summary

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

How To Load A Spinner Till Data Loads In To Ui In Angular 5,

Source: https://www.c-sharpcorner.com/article/how-to-add-loaderspinner-in-angular-8-application/

Posted by: wagnersubbillson.blogspot.com

Share this post