Introduction

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
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.
  1. "scripts": [
  2. "node_modules/jquery/dist/jquery.js",
  3. "node_modules/bootstrap/dist/js/bootstrap.js"]
Now Bootstrap will work fine.
Step 4
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.
  1. import {
  2. Injectable
  3. } from '@angular/core';
  4. @Injectable({
  5. providedIn: 'root'
  6. })
  7. export class StudentService {
  8. students = [{
  9. "id": 1001,
  10. "name": "Irshad",
  11. "marks": 90
  12. }, {
  13. "id": 1002,
  14. "name": "Imran",
  15. "marks": 80
  16. }, {
  17. "id": 1003,
  18. "name": "Rahul",
  19. "marks": 70
  20. }, {
  21. "id": 1004,
  22. "name": "Ajay",
  23. "marks": 85
  24. }, {
  25. "id": 1005,
  26. "name": "Sunny",
  27. "marks": 60
  28. }];
  29. constructor() {}
  30. getStudents() {
  31. return this.students;
  32. }
  33. }
Step 6
Lets call this service in our popuploader component
  1. import {
  2. Component,
  3. OnInit
  4. } from '@angular/core';
  5. import {
  6. StudentService
  7. } from '../student.service';
  8. @Component({
  9. selector: 'app-popuploader',
  10. templateUrl: './popuploader.component.html',
  11. styleUrls: ['./popuploader.component.css']
  12. })
  13. export class PopuploaderComponent implements OnInit {
  14. public loading = true;
  15. public studentList: any[];
  16. constructor(private stnService: StudentService) {}
  17. ngOnInit() {
  18. this.loading = true;
  19. setTimeout(() => {
  20. /** spinner ends after 5 seconds */
  21. this.studentList = this.stnService.getStudents();
  22. this.loading = false;
  23. }, 5000);
  24. }
  25. }
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.
Step 6
Let's create a Model dialog with the help of Bootstrap and call the data & spinner.
  1. <!-- Button to Open the Modal -->
  2. <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  3. Open modal
  4. </button>
  5. <!-- The Modal -->
  6. <div class="modal" id="myModal">
  7. <div class="modal-dialog">
  8. <div class="modal-content">
  9. <!-- Modal Header -->
  10. <div class="modal-header">
  11. <h4 class="modal-title">popuploader</h4>
  12. <button type="button" class="close" data-dismiss="modal">×</button>
  13. </div>
  14. <!-- Modal body -->
  15. <div class="modal-body">
  16. <div *ngIf="loading else loaded" class="loader"></div>
  17. <!-- Modal footer -->
  18. <div class="modal-footer">
  19. <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
  20. </div>
  21. </div>
  22. </div>
  23. </div>
  24. <ng-template #loaded>
  25. <p>student works!</p>
  26. <table class="table">
  27. <thead>
  28. <td>
  29. ID
  30. </td>
  31. <td>
  32. Name
  33. </td>
  34. <td>
  35. Marks
  36. </td>
  37. </thead>
  38. <tbody>
  39. <tr *ngFor="let std of studentList">
  40. <td>{{std.id}}</td>
  41. <td>{{std.name}}</td>
  42. <td>{{std.marks}}</td>
  43. </tr>
  44. </tbody>
  45. </table>
  46. </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.
  1. <ng-template #loaded>
  2. …..
  3. </ng-template>
I gave the name of the template as loaded.
To show the templete I have set condition as,
  1. <div *ngIf="loading else loaded" class="loader">
  2. </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.