Angular Material Progress Spinner

In this lecture we'll take a deep look at angular material progress spinner, as always we need to import the module in our material.module.ts and include it in MaterialComponents array

import { MatProgressSpinnerModule } from "@angular/material";

const MaterialComponents = [
  MatProgressSpinnerModule
];

This module basically provides us with two spinner components <mat-progress-spinner> and mat-spinner the first one <mat-progress-spinner> is a determinate spinner which has a value attribute that can be between 0 and 100, let's see this example bellow.

<mat-progress-spinner value="40"></mat-progress-spinner>

If you take a look at the browser you can see a spinner that is at 40% value. We can also specify the value as 0 in which case you can not see any spinner at all and a value of 100 which shows the complete spinner.

You can also bind the value attribute programmatically to indicate any progress that has to be conveyed to the user, a more common use case of the spinner is the indeterminate spinner or the spinner never stops spinning for that we make use of the <mat-spinner> component

<mat-spinner></mat-spinner>

Save the file and take a look at the browser you can see that we have a progress spinner that spins indefinitely you would want to use this to indicate to the user that something is running in the background and the UI is busy for example is you are loading data it is a good idea to show the spinner and then hide is when the data has loaded let mock the loading of data with a button click, so I'm going to go back to app.component.ts and create a new property I call it showSpinner and initialize it to false, I'm also going to define a method loadData() and in this method initially we are going to set showSpinner to true and then we use setTimeout (which is pure javascript function) to set it back to false after 5 seconds.

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent {

  showSpinner = false;

  loadData() {
    this.showSpinner = true;
    setTimeout(() => {
      this.showSpinner = false;
    }, 5000);
  }
}

In the HTML we'll use the ngIf condition with showSpinner and also create a button that calls the loadData() method.

<mat-spinner *ngIf="showSpinner"></mat-spinner>

<button mat-raised-button color="primary" (click)="loadData()">
  Load Data
</button>

Initially you can see that the spinner is hidden but when I click on the button and the spinner appears this indicates to the user the data is being fetched and after 5 seconds the spinner disappears which again can indicate to the user that the data has been loaded.

Now ideally you want a separate component with more styling like an overlay and z-index so that nothing else can be clicked when data is being loaded or even a form being submitted and also by default the color is set to primary color of the team but again like other components you can set the color attribute to accent or warn as well.

<mat-spinner color="primary"></mat-spinner>
<mat-spinner color="accent"></mat-spinner>
<mat-spinner color="warn"></mat-spinner>

As you can see the spinner's colors is changed with the color attribute.

So that's it about the progress spinner, similar to the progress spinner there is also the progress bar indicator in angular material it works almost the same as progress spinner so I will leave it up to you guys to experiment and understand how it works.