Use Angular Material Dialog As Spinner

Introduction

Recently, while working on a project, I struggled in blocking the user interaction when calling the API. I tried to use third party components for a spinner but it won't look good with Angular Material design. So, finally, I solved it by using Angular Dialog as a spinner and disabled the "Close" button. Every developer knows that spinner is a very significant component in SPA and is used on almost every screen we develop. So, I implemented a reusable component.

Step 1 - Create a Spinner Component

Create a component by name SpinnerComponent, as shown below.

If you are using Angular CLI, use the following command.

ng g component spinner-view

The structure looks like below.

Open the component file and import MatDialogRef, MAT_DIALOG_DATA from @angular/material package. Here, we need to install Angular Material before importing this.

import { MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';

Add the required varaibles in the constructor.

constructor(public dialogRef: MatDialogRef<SpinnerComponent>
, @Inject(MAT_DIALOG_DATA) public data: any) {}
}

Also, add an onclick method. Finally, the overall component looks like below.

import {Component, Inject} from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
@Component({
selector: 'spinner-view',
templateUrl: 'spinner-view.component.html',
})
export class SpinnerComponent {
constructor(public dialogRef: MatDialogRef<SpinnerComponent>
, @Inject(MAT_DIALOG_DATA) public data: any) {}
}

In the View, add spinner and its configuration. The View looks like this.

<mat-spinner [diameter]="50" style="margin: 0 auto;"></mat-spinner>
<span>{{data}}</span>

Step 2

Import the MatDialogModule, MatProgressSpinnerModule in Appmodule.

import {
MatDialogModule,
MatProgressSpinnerModule,
} from '@angular/material';
......
imports: [
MatDialogModule,
MatProgressSpinnerModule,
],

Step 3 - Create Spinner reusable service.

Create an export Injectable class with the name spinner.service.ts. Import MatDialog from @angular/material and create a varable in constructor. Also, implement the stop and start methods like below.

import { EventEmitter, Injectable } from '@angular/core';
import { Event, NavigationEnd, Router } from '@angular/router';
import { MatDialog, MatDialogRef } from '@angular/material';
import { SpinnerComponent } from './spinner-view/spinner-view.component';
@Injectable()
export class SpinnerService {
constructor(private router: Router, private dialog: MatDialog) {
}
start(message?): MatDialogRef<SpinnerComponent> {
const dialogRef = this.dialog.open(SpinnerComponent,{
disableClose: true ,
data: message == ''|| message == undefined ? "Loading..." : message
});
return dialogRef;
};
stop(ref:MatDialogRef<SpinnerComponent>){
ref.close();
}
}

The Spinner service is ready to use. Add this service in providers in the appmodule.ts file and start using it.

Step 4 - Usage

Let us see how to use this while calling the APIs.

Import the spinner service in the component where you want to use the spinner.

import { SpinnerService } from './../../services/spinner/spinner.service';

Create a vairable in constructor.

constructor(private spinnerService: SpinnerService) {
}

Use spinner service like below while calling the API.

var spinnerRef = this.spinnerService.start();
this.YourService.YourAPi().pipe(finalize(() => {
this.spinnerService.stop(spinnerRef);
})).subscribe(res => {
}, err => {
}
)

Step 5 - Customize loading text

Pass the text to the start method of spinner service to get a customized text with spinner like below.

var spinnerRef = this.spinnerService.start("Customized loading text here");

Summary

In this article, I discussed how we can create a spinner reusable service in Angular Material using Angular Material Dialog. We also saw how to pass our own loading text to the spinner. I hope this article helps you all.