Angular Material 16 Progress Bar Tutorial Example

We are going to use mat-progress-bar directive to create various types of progress bars.

A progress bar is a user interface element. It is used to show the progression for various operation performed in web, mobile or software applications such as downloading a file, transferring a file, making booking etc.

Material design offers top-notch and beautiful UI components to create an application faster. The material progress bar is one the UI component available in the material design library that is easy to implement and use.

In this tutorial, we are going to discuss how to use mat-progress-bar in an Angular app to display the progression of an event to the user.

The mat-progress-bar is initialized using the Angular Material’s MatProgressBarModule module.

Angular Material Progress Bar Example

• Set up Angular Project
• Install Angular Material
• Import Angular Material progress-bar
• Create Horizontal Progress Bar
• Progress Mode Types
• Determinate Progress Bar
• Indeterminate Progress Bar
• Buffer mat-progress-bar Mode
• Progress Bar Query Mode
• Adding Style in Progress Bar
• Properties of MatProgressBar Directive

Initiate Angular Project

To understand this tutorial better, we have to install a brand new Angular project, and however if you have already set up the Angular project, then you can skip this step.

Just run the following command to get started.

ng new angular-progressbar

Don’t forget to get into the project folder.

cd angular-progressbar

Furthermore, set following properties to false in tsconfig.json file:

"compilerOptions": {
 ...
 ...
   "strict": false,
   "noPropertyAccessFromIndexSignature": false,
 ...
 ...
},
  "angularCompilerOptions": {
    "strictTemplates": false
  }

Create a specific component for demonstrating the Angular progress bar example.

ng g c progress-bar

Install Angular Material 9

Run the following command via Angular CLI to install the Angular Material library.

ng add @angular/material

Select some options asked by Angular CLI in regards to Angular material:

? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink
❯ Indigo/Pink        [ Preview: https://material.angular.io?theme=indigo-pink ] 
  Deep Purple/Amber  [ Preview: https://material.angular.io?theme=deeppurple-amber ] 
  Pink/Blue Grey     [ Preview: https://material.angular.io?theme=pink-bluegrey ] 
  Purple/Green       [ Preview: https://material.angular.io?theme=purple-green ]
? Set up global Angular Material typography styles? Yes
? Set up browser animations for Angular Material? Yes

Import Angular Material progress-bar

To start working with the progress bar, we have to import MatProgressBarModule API from ‘@angular/material/progress-bar’ library in app.module.ts file.

import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ProgressBarComponent } from './progress-bar/progress-bar.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { MatProgressBarModule } from '@angular/material/progress-bar';
@NgModule({
  declarations: [AppComponent, ProgressBarComponent],
  imports: [BrowserModule, BrowserAnimationsModule, MatProgressBarModule],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

As you can see we have also added the CUSTOM_ELEMENTS_SCHEMA, It adds a schema in Angular that allots a NgModule to accommodate the following:

• Non-Angular elements named with dash case (-).
• Element properties named with dash case (-). Dash case is the naming convention for custom elements.

Create Horizontal Progress Bar

The <mat-progress-bar> is a horizontal progress-bar for displaying progress activity for a specific on going process.

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

Let’s move one step further and understand how to create a horizontal progress bar in an Angular app using material design UI component.

We used the mat-progress-bar attribute to display the progress bar and defined value=”40″. The value refers to the percentage which indicates the progress for on going event.

Let’s understand Progress mode in details.

Progress Mode Types

You can create different types of progress bars with Angular Material using the mode property. The progress-bar offers four various types of progress modes. We can use either of the Progress mode using mode property.

However, default mode type is determinate.

• Determinate
• Indeterminate
• Buffer
• Query

In the next step we will learn how to use progress mode to create animated progress bars.

Determinate Progress Bar

Operations where the percentage of the operation complete is known should use the determinate indicator.

The determinate mode is used when we we know the progress completion time in advance.

<mat-progress-bar mode="determinate" value=60></mat-progress-bar>

The value property shows the completion of the current process.

Indeterminate Progress Bar

The indeterminate mode is used when we are not sure of how much time the process will complete.

We know in specific conditions we have to wait for an unknown duration or unless some process is accomplished. It could be sending some data to the server and waiting for a response.

In this case, we are completely unaware that how much time the process will take to be finished. So, we don’t define value in the mat-progress-bar.

<mat-progress-bar mode="indeterminate" *ngIf="isCompleted"></mat-progress-bar>

The *ngIf directive is used with mat-progress-bar attribute. It shows the progress bar only when the condition is true.

Buffer mat-progress-bar Mode

The buffer mode is used to show activity or loading in various steps. If we try to understand in simple terms, then this means when we sub-divided single progress in multiple phases.

Buffer indicator intimates at every step where a task is completed.

<mat-progress-bar mode="buffer" value=30 bufferValue=60></mat-progress-bar>

You can see bufferValue and value with buffer mode. Here, bufferValue refers to the buffer indicator progress fog an ongoing event. Always set bufferValue higher than the value property.

Progress Bar Query Mode

What if you need to show the pre-loading of the progress bar, in this case, the Query mode is going to be very useful for you.

In query mode, when the loading starts, the mode automatically converts to determinate or indeterminate and starts displaying the ongoing progress of the current process.

<mat-progress-bar mode="query"></mat-progress-bar>

Adding Style in Progress Bar

Updating the color of a specific progress-bar is merely effortless, we need to use the colour property and pass either of the pre-defined color themes of material design.

• primary – Default theme
• accent
• warn

<mat-progress-bar color="accent" mode="determinate" value="40"></mat-progress-bar>

Properties of MatProgressBar Directive

Here are the various properties offered by the MatProgressBar.

In order to activate the progress bar component of Angular material in Angular, add the below code inside the app.component.html file:

<app-progress-bar></app-progress-bar>

Conclusion

The Angular Material Progress Bar tutorial is over. In this tutorial, we learned how to use Angular Material’s mat-progress-bar directive to show the progress of the ongoing event.

To know more about Angular Material UI components, you must check out their documentation here.