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.
-
1. Angular Material - Getting Started
-
2. Angular Material - Material Module
-
3. Angular Material - Typography
-
4. Angular Material - Buttons
-
5. Angular Material Button Toggle
-
6. Angular Material Icons
-
7. Angular Material Badges
-
8. Angular Material Progress Spinner
-
9. Angular Material Navbar
-
10. Angular Material Sidenav
-
11. Angular Material Menu
-
12. Angular Material List
-
13. Angular Material Grid List
-
14. Angular Material Expansion Panel
-
15. Angular Material Cards
-
16. Angular Material Tabs
-
17. Angular Material Stepper
-
18. Angular Material Input
-
19. Angular Material Select
-
20. Angular Material Autocomplete
-
21. Angular Material Checkbox & Radio Button
-
22. Angular Material Date Picker
-
23. Angular Material Tooltip
-
24. Angular Material Snackbar
-
25. Angular Material Dialog
-
26. Angular Material Data Table
-
27. Angular Material Exploring Data Table
-
28. Angular Material Data table Filtering
-
29. Angular Material Data Table Sorting
-
30. Angular Material Data Table Pagination
-
31. Angular Material Virtual Scrolling