Create Progress Bar in Angular 13 using Material Package

Angular progress bar tutorial, In this extensive tutorial, you will find out an elegant way to create a progress bar in an angular application using the angular material library.

A progress bar is a user interface module that graphically describes the progress of the current operation.

You may visually ascertain data transfer status, image uploading or downloading, file downloading, song downloading, etc.

Material library is loaded with innumerable UI components that are immaculately user-centric for building a clean or user-friendly app.

This guide will today explore the implementation of progress bar in angular using the <mat-progress-bar>

Angular 13 Progress Bar Example

  • Step 1: Create Angular App
  • Step 2: Add Angular Material Package
  • Step 3: Register Material Progress Bar Module
  • Step 4: Implement Simple Progress Bar
  • Step 6: Material Progress Types
  • Step 5: Progress Bar Theming
  • Step 7: Run Angular Project

Create Angular App

For working with angular project, first, make sure the angular CLI tool configured on your machine:

npm install -g @angular/cli

You can now create a new elementary angular application:

ng new ng-progressbar-demo

Don’t forget to get into the app’s root:

cd ng-progressbar-demo

Disable Strict Angular TypeStrict Errors

The latest version of Angular comes with strict mode, you have to manually disable the strict mode you can set “strict”: false, "noImplicitReturns": false and "strictTemplates": false inside the compilerOptions and angularCompilerOptions in tsconfig.json file.

Add Angular Material Package

Next, use the suggested command to add the angular material package in the angular app:

ng add @angular/material

Answer the following questions displayed on your terminal screen:

  1. Choose a prebuilt theme name or “custom” for a custom theme:

    You can choose from prebuilt material design themes or set up an extensible custom theme.

  2. Set up global Angular Material typography styles:

    Whether to apply the global typography styles to your application.

  3. Set up browser animations for Angular Material:

    Importing the BrowserAnimationsModule into your application enables Angular’s animation system. Declining this will disable most of Angular Material’s animations.

Afterward, define the prebuilt theme’s CSS in src/styles.scss file:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Register Material Progress Bar Module

Open app.module.ts config file, first import MatProgressBarModule, CUSTOM_ELEMENTS_SCHEMA likewise add the MatProgressBarModule in imports array. Additionally, define the schemas array with CUSTOM_ELEMENTS_SCHEMA.

import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.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
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatProgressBarModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

export class AppModule { }

Implement Simple Progress Bar

Open the app.component.html template, insert the recommended code and save the file.

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

<mat-progress-bar> directive allows you to create a sleek and simple progress-bar that displays the operation’s progress horizontally for a specific task.

Material Progress Types

You can set four modes in the progress bar based on your need, and those modes are determinate, indeterminate, buffer and query.

Material Determinate Progress Bar

The Determinate mode is suggested for the scenario, where you are aware of the event completion percentage in advance.

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

Material Indeterminate Progress Bar

The indeterminate mode is beneficial for the condition where you are not sure of the event completion time, therefore setting the mode to indeterminate with the boolean variable. This will display the progress bar when matching the true condition.

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

Material Buffer Progress Bar

If you want to display operation progress at some point of time or a specific interval, then the buffer mode will work for you; set value with bufferValue where you need to indicate the progress update.

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

Material Query Progress Bar

The material progress bar’s Query mode is used primarily for showing pre-loading right before the real loading starts.

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

Change Progress Bar Color

What if we want to update or change the color of the progress bar? Fret not; material UI offers a theme customization option for progress bars; you can change from default theme to accent or warn.

Define the color="" property and pass either accent or warn for changing the theme color:

<mat-progress-bar color="warn" mode="determinate" value="55"></mat-progress-bar>

Run Angular Project

You can start the application using the recommended command, hence open the console similarly execute the command to start the development server:

ng serve

The above schematic gives you the url on the console screen; you can test the app with this link:

http://localhost:4200

Conclusion

The angular material progress bar tutorial is finished; in this inclusive guide, we learned to create a bar in angular using the material library.

We also ascertained how to style the material progress bar and examined the various types of material progress bars.