Updated April 5, 2023
Definition of Angular Material Progress Bar
Angular material provides us progress bar which helps us to keep track of the activity, which means it tells the progress on that particular activity. We will fill the bar with some color to track the activity of the task. Angular material makes it more attractive and user-friendly by adding the default styling and designing to the progress bar. Also, we can use this and implement this using the in-build module and directive provided by the material library. In order to use this, we will make some configurations to the angular application which we will see in detail in the coming section for better understanding and clarity.
Syntax:
In this section we will have closer look at the syntax for this, we basically used the directive provided by the angular material itself so let’s get started in details
<mat-progress-bar mode="your_mode" value="your_value"></mat-progress-bar>As you can see we are trying to use ‘mat-progress-bar’ to create the progress bar using the material, also we have to specify the mode of the progress bar, we will discuss this incoming section in detail for better understanding.
How to Create Progress Bar in Angular Material?
As of now we already know that by using the angular material progress bar we can easily specify the progress of the task or activity to the user. This helps the user to specify how much it will take the task to complete also, it makes the waiting process for the user a little bit interactive, and they also have some idea that the process is taking time to complete and it is happening in the background. In the material library, we have in build module which helps us to create this progress bar easily, so let’s get started;
1. MatProgressBarModule
This module is provided by the material library which helps to create the progress bar easily and quickly. We need to import this in our root module or any child module in which we want to create the progress bar. For reference please find the code below;
Example:
import {MatProgressBarModule} from '@angular/material/progress-bar';Use the above code as it is on your root module class.
2. mat-progress-bar
Now we have this selector that is ‘mat-progress-bar’ why the use of this tag on HTML or Template we can render the progress bar, as per our need. Below see sample piece of code to use it, Before this let’s take a closer look at the different types of mode for the progress bar in detail;
- a) Determinate
- b) Indeterminate
- c) Buffer
- d) query
Now let’s get started with the steps that need to be taken in order to step up our angular material project initially for beginners see below;
- First, install the angular CLI which enables us to download the required packages and library for our project. You can download it by typing the below command on your command make sure you have already installed node see below;
Example:
npm install -g @angular/cli)The above command will install the CLI globally in our system hence we can use it globally when required.
- Now in this step, we will try to create the new angular project from scratch, this project will not be a material project that we have to add later by installing the material dependency inside our project. so just execute the below command on your Command Prompt and press enter see below;
Example:
ng new your project name
>> ng new my-first-projectThis command will create the project with the name my-first-project, you can create your project with any name mentioned.
- Just to make sure try one command which is mentioned below to install all the required library into our project,
Example:
npm install- Now you can test and run your project by typing the simple command which is mentioned below. This is just to make sure that we are on the right track and our project has been created without any errors or bugs inside it.
Example:
ng serve- go on browser and try to run the application with the below URL :
Example:
http://localhps:4200
By default angular project runs on port 4200, you can change it as per your need if required.
- Now everything is set we have our angular project now we will add the material library to our project just by running the below command on the command prompt;
Example:
ng add @angular/materialExample of Angular Material Progress Bar
Examples of angular material progress bars is given below:
1. demo.progress.component.ts code:
import {Component} from '@angular/core';
import {ThemePalette} from '@angular/material/core';
import {ProgressBarMode} from '@angular/material/progress-bar';
/**
* @title demo porgress bar
*/
@Component({
selector: 'progress-bar-demo',
templateUrl: 'demo.progress.component.html',
styleUrls: ['demo.progress.component.css'],
})
export class DemoProgressBar {
color: ThemePalette = 'primary';
mymode: ProgressBarMode = 'determinate';
myvalue = 30;
mybufferValue = 56;
}2. demo.porgress.component.html code:
<h3><u><i>Progress bar demo using angular material library !!</i></u></h3>
<mat-card>
<mat-card-content>
<section class="example-section">
<label >Select Mode:</label>
<mat-radio-group [(ngModel)]="mymode">
<mat-radio-button value="determinate">
Determinate
</mat-radio-button>
<mat-radio-button value="indeterminate">
Indeterminate
</mat-radio-button>
<mat-radio-button value="buffer">
Buffer
</mat-radio-button>
<mat-radio-button value="query">
Query
</mat-radio-button>
</mat-radio-group>
</section>
<section *ngIf="mymode === 'determinate' || mymode === 'buffer'">
<label class="example-margin">Move Progress:</label>
<mat-slider class="example-margin" [(ngModel)]="myvalue"></mat-slider>
</section>
<section class="example-section" *ngIf="mymode === 'buffer'">
<label class="example-margin">Buffer Progress:</label>
<mat-slider class="example-margin" [(ngModel)]="mybufferValue"></mat-slider>
</section>
</mat-card-content>
</mat-card>
<br/>
<mat-card>
<mat-card-content>
<h2><u><i>Progress Result : </i></u></h2>
<section >
<mat-progress-bar
[color]="color"
[mode]="mymode"
[value]="myvalue"
[bufferValue]="mybufferValue">
</mat-progress-bar>
</section>
</mat-card-content>
</mat-card>3. module.ts code:
import {NgModule} from '@angular/core';
import {MatProgressBarModule} from '@angular/material/progress-bar';
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
@NgModule({
exports: [
MatProgressBarModule,
MatProgressSpinnerModule,
]
})
export class DemoProgressBarModule {}4. index.html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block" rel="stylesheet">
<title>Demo progress bar</title>
</head>
<body class="mat-app-background">
<progress-bar-demo>Loading..</progress-bar-demo>
<span class="version-info">Current build: 12.1.1</span>
</body>
</html>Output for each mode:
deterministic mode:
indeterministic mode :
buffer mode:
query mode:
Conclusion
As we have already discussed the usage and implementation of the progress bar, the material makes it easy for us to implement. Also, we just have to specify the correct module and import it and directly use it on the template. It is easy to use, implement, and maintainable by the developers.
Recommended Articles
We hope that this EDUCBA information on “Angular Material Progress Bar” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
