In this article, we will learn how we can show the Loader in Angular 11 without using any third-party spinner. We are using CSS to build an animated Spinner.
Prerequisites
Basic Knowledge of Angular 2 or higher
Visual Studio Code
Node and NPM installed
Bootstrap
Step 1
Create an Angular project by using the following command
ng new Angularloader
Step 2
Open this project in Visual Studio Code and install bootstrap by using the following command
npm install bootstrap --save
Step 3
Jquery is needed to run bootstrap click events. So install jquery using below command
npm install jquery --save
Declare Jquery before bootstrap.
Otherwise, you will get the below error
Uncaught TypeError: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.
"scripts": [
"node_modules/jquery/dist/jquery.js",
"node_modules/bootstrap/dist/js/bootstrap.js"] Now Bootstrap will work fine.
Step 4
Let's start the main goal of the articlet to show spinner.
Create one new component using Ng g c popuploader
In popuploader.component.css file paste below lines of code to create animated spinner
.loadWrapper {
background: rgba(0, 0, 0, 0.3);
width: 100 % ;
height: 100 % ;
position: fixed;
top: 0 px;
left: 0 px;
z - index: 99999;
}.loader {
border: 5 px solid #f3f3f3; /* Light grey */
border - top: 5 px solid #3d3e3f; /* gray */
position: absolute;
left: 50%;
top: 50%;
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
} Step 5
We will create one simple data service which will load data into table..For that I have created student.service.ts file
In StudentService write the below line of code.
import {
Injectable
} from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class StudentService {
students = [{
"id": 1001,
"name": "Irshad",
"marks": 90
}, {
"id": 1002,
"name": "Imran",
"marks": 80
}, {
"id": 1003,
"name": "Rahul",
"marks": 70
}, {
"id": 1004,
"name": "Ajay",
"marks": 85
}, {
"id": 1005,
"name": "Sunny",
"marks": 60
}];
constructor() {}
getStudents() {
return this.students;
}
} Step 6
Lets call this service in our popuploader component
import {
Component,
OnInit
} from '@angular/core';
import {
StudentService
} from '../student.service';
@Component({
selector: 'app-popuploader',
templateUrl: './popuploader.component.html',
styleUrls: ['./popuploader.component.css']
})
export class PopuploaderComponent implements OnInit {
public loading = true;
public studentList: any[];
constructor(private stnService: StudentService) {}
ngOnInit() {
this.loading = true;
setTimeout(() => {
/** spinner ends after 5 seconds */
this.studentList = this.stnService.getStudents();
this.loading = false;
}, 5000);
}
} Step 7
You can seen I have created one variable loading this will decide whether loading spinner should show or not.
Before loading the data into variable I set as true .then the spinner will show.
Then I given some time to show the spinner.
After that I set to False to hide the spinner. As I mentioned no need of timer when API. Call.
Once API call over set it as false.
Step 6
Let's create a Model dialog with the help of Bootstrap and call the data & spinner.
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">popuploader</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div *ngIf="loading else loaded" class="loader"></div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<ng-template #loaded>
<p>student works!</p>
<table class="table">
<thead>
<td>
ID
</td>
<td>
Name
</td>
<td>
Marks
</td>
</thead>
<tbody>
<tr *ngFor="let std of studentList">
<td>{{std.id}}</td>
<td>{{std.name}}</td>
<td>{{std.marks}}</td>
</tr>
</tbody>
</table>
</ng-template> In about code, we have created one button. That button will trigger the popup.
We should call the popup using the data-target attribute data-target="#myModal".
Mymodel is the id of model dialog.
In our process, I will load the spinner with the timer. In real-life cases, no timer is needed.
I have created ng template and I have loaded the data there.
<ng-template #loaded>
…..
</ng-template> I gave the name of the template as loaded.
To show the templete I have set condition as,
<div *ngIf="loading else loaded" class="loader">
</div> SO if loading variable is true then the loaded template will show with loader css.
If false then loader CSS will disappear
Now type ng serve to ( use angular CLI ) run the project.
Source: Paper.li - By Murali Krishnan
The Tech Platform
Comments