There are 4 types of progress bars: Determinate, Indeterminate, Buffer, and Query.
Angular Material UI: Progress Bars
Hello, in this tutorial, I will be talking about progress bars from Angular Material. There are 4 types of progress bars.
Determinate
The determinate progress bar is used to display the percentage of how much a task is completed.
Indeterminate
The indeterminate progress bar is used to show that something is running in the background but it is not necessary to show how much is completed.
Buffer
The buffer progress bar is like the determinate progress bar but there are 2 phrases. The buffer phrase that shows the amount of data that is retrieved and the actual processing phase where it shows much how of the process was completed.
Query
The query progress bar is used to represent that something is being processed before the actual processing starts.
To begin, add the MatProgressBarModule to your project. Go to the app module file, add the import statement, and add it to the app.
...
import { MatProgressBarModule } from '@angular/material/progress-bar';
@NgModule({
declarations: [
AppComponent
],
imports: [
...
MatProgressBarModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
To add a progress bar, use the mat-progress-bar element then set the mode attribute to either determinate, indeterminate, buffer, or query.
<mat-progress-bar [mode]="'determinate'"></mat-progress-bar>
Setting the values
To set the current progress for the determinate progress bar, set the value attribute to a value between 0 and 100.
<mat-progress-bar
[mode]="'determinate'"
[value]="40"
></mat-progress-bar>
Instead of using a hard coded value, we should use a variable or a function.
TypeScript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
percent = 40;
constructor(){
}
}
HTML
<mat-progress-bar
[mode]="'determinate'"
[value]="percent"
></mat-progress-bar>
Buffer Progress Bar
For the buffer progress bar, we need to supply it with 2 values, the buffer value which indicates how much content was downloaded, and the value itself.
<mat-progress-bar
[mode]="'buffer'"
[bufferValue]="75"
[value]="percent"
></mat-progress-bar>
Changing the Color
We can also change the color of the progress bars by setting the color attribute to either primary, accent, or warn. These colors are determined by the theme you have chosen when you add Angular Material to your project.
<mat-progress-bar
[mode]="'determinate'"
[value]="percent"
[color]="'primary'"
></mat-progress-bar>
