How to show Loading Spinner icon using service in Angular Application

Hello folks, Today we will show you, How to show loading/spinner using service in our application.

you could also use Ngx spinner library but i would suggest to use custom created spinner in the project. Benefit of custom created spinner is we can easily modify it accordingly our requirement and also add some extra features with it.

Prerequisites: 

• Basic Knowledge of Angular 2 or higher
• Visual Studio Code
• Set up of angular environment.
• Bootstrap

Here i am working on Angular Version 8 project.

Now follow the below steps to create custom loader:

Step 1: Create a service for loading.

Step 1.1: Create a service as show in below snapshot.

ng g s FOLDER_NAME/SERVICE_NAME

Step 1.2: Go to loading.service.ts file which created in above step. Copy the below code and paste it in that file.

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class LoadingService {

  private subject = new Subject<any>();
  getStatus = this.subject.asObservable();

  constructor() {
  }

  open() {
    this.subject.next({ action: 'open' });
  }

  close() {
    this.subject.next({ action: 'close' });
  }
}

Step 2: Create a component for loading icon.

Step 2.1: Create a new component where we will design our loader icon.

ng g c COMPONENT_NAME

Step 2.2: Go to loader.component.ts file which we created in above step. Copy the below code and paste it in here.

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { LoadingService } from 'src/app/services/loading/loading.service';

@Component({
  selector: 'app-loader',
  templateUrl: './loader.component.html',
  styleUrls: ['./loader.component.css']
})
export class LoaderComponent implements OnInit, OnDestroy {

  private subscription: Subscription;
  show: boolean;
  constructor(
    private loadingService: LoadingService,
  ) { }

  ngOnInit() {
    this.subscription = this.loadingService.getStatus.subscribe(data => {
      switch (data.action) {
        case 'open':
          this.show = true;
          break;
        case 'close':
          this.show = false;
          break;
      }
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

Step 2.3: Go to loader.component.html file. Copy the below code and paste it in here.

    <h6> Home page </h6>
    <button type="button" (click)="submit()"> Submit </button>

Step 2.4: Go to loader.component.css file. Copy the below code and paste it in here.

.loading {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    z-index: 99999;
    width: 100%;
    text-align: center;
    padding-top: 20%;
    background-color: rgba(0, 0, 0, 0.5);
}

Step 3: Use Loader component in root html file.

Step 3.1: Now go to app.component.html file and copy the below code paste it in below
<router-outlet> </router-outlet>  tag.

<app-loader></app-loader>

We have successfully created our custom loader service. With the help of this service we can show/hide loading icon in out project during runtime.  Now it's time to use it in our project

How to Use:
Here i have one home page. In that page i have a one submit button. on the click of button, i will open a loading and after 4 sec it will close that loading icon automatically.

Step 1: Copy the below code and paste it in constructor. here we are using loading service to open/close loading.
( If you are familiar with angular then you know about it. Here we using DI  ).

private loadingService: LoadingService

Step 2: In submit method, copy the below code and paste it in that method.

   // THIS CODE IS USE TO SHOW THE LOADING ON YOUR SCREEN
    this.loadingService.open();
    setTimeout(() => {
      // THIS CODE IS USE TO CLOSE THE LOADING ON YOUR SCREEN
      this.loadingService.close();
    }, 4000);

Now let's test it.

After click on submit button it show loading and after 4 sec it automatically close the loading.

Note :
To open the loading just use :  this.loadingService.open();
To close the loading just use :  this.loadingService.close();


Keep learning , Keep Growing, Keep sharing !!!