Solved: change color of material design angular progress bar

Material Design is a design system developed by Google, and it provides a unified and comprehensive visual language for different platforms and devices. One of the components provided by Material Design is the progress bar, which can be used to display the progress of a task in a visual way. Changing the color of the progress bar in Angular Material Design can add a personalized aesthetic touch to your applications, reflecting your brand’s colors or differentiating between different processes in your tasks. This article will guide you on how to accomplish this with simple and clear instructions.

Setting Up your Angular Project

In order to change the color of the Angular Material Design progress bar, an Angular project incorporating Material Design modules must be in place.

npm install --save @angular/material @angular/cdk @angular/animations

Once the installation is complete, import the necessary Angular Material Design modules; including the one necessary for the progress bar, into your app.module.ts file.

import { MatProgressBarModule } from '@angular/material/progress-bar';
//import the other necessary modules 

@NgModule({
  declarations: [
    //your components here
  ],
  imports: [
    MatProgressBarModule,
    //other modules here
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Implement Material Design Progress Bar

With the Angular project set up, next is to implement the progress bar on the component where it’s required. Declare a variable, say ‘progressValue’, in your Typescript file, that you will bind to the progress bar to depict progress.

export class AppComponent  {
  progressValue = 0;
  //the rest of your code here
}

Then on your HTML file, employ to implement it:

<mat-progress-bar mode="determinate" &#91;value&#93;="progressValue"></mat-progress-bar>

Changing the Progress Bar Color

Changing the color of the Angular Material Design progress bar requires a manipulation of the CSS. With Angular Material Design, the color of the components can be represented with either ‘primary’, ‘accent’, or ‘warn’.

<mat-progress-bar color="primary" mode="determinate" &#91;value&#93;="progressValue"></mat-progress-bar>

However, if the colour you need is not among the predefined themes, you can always create a custom theme.

• Define a class in your CSS file naming it, say ‘customColor’ and set the properties:

  .mat-progress-bar .mat-progress-bar-fill::after {
      background-color: red;
  }
  

• Apply this class to your progress bar element:

  <mat-progress-bar class="customColor" mode="determinate" &#91;value&#93;="progressValue"></mat-progress-bar>
  

In conclusion, the color of the Angular Material Design progress bar can be customized easily using pre-defined themes or creating custom ones in order to give your application the desired look and feel. Remember to apply your themes to your Angular Material components in a consistent manner to achieve a unified and harmonious look.