Change angular material progress bar color from code

Update:

Avoid using deep, TL;DR: Deep is technically invalid (like, deeprecated :p)

For more info refer: The use of /deep/ and >>> in Angular 2

Now, to change the color of mat-progress bar,

Head over to your styles.scss file (or the main css/scss file in your project)

Add this class -->

.green-progress .mat-progress-bar-fill::after {
    background-color: green !important;
}

Your mat-progress should use the above class, like -->

<mat-progress-bar class="green-progress" mode="indeterminate"></mat-progress-bar>

We can create an attribute directive which accepts the color value and override default styles of <mat-progress-bar> for us.

here is a working demo : https://stackblitz.com/edit/material-progress-bar-color-directive

here is a brief explanation:

If we inspect <mat-progress-bar> in developer tools. we will find that color of the progress-bar is defined in the ::after pseudo element like this.

.mat-progress-bar-fill::after {
    background-color: #3f51b5;
}

And as we already know that it is not possible to directly manipulate a pseudo element using DOM querySelector() method. But we can add new styles which can have rules for pseudo elements too. checkout this thread for more details. https://stackoverflow.com/a/21709814/1160236

So, we can make a directive which can take care of adding new styles for us.

import { Directive, Input, OnChanges, SimpleChanges, ElementRef } from '@angular/core';

@Directive({
  selector: '[appProgressBarColor]'
})
export class ProgressBarColor implements OnChanges{
  static counter = 0;

  @Input() appProgressBarColor;
  styleEl:HTMLStyleElement = document.createElement('style');

  //generate unique attribule which we will use to minimise the scope of our dynamic style 
  uniqueAttr = `app-progress-bar-color-${ProgressBarColor.counter++}`;

  constructor(private el: ElementRef) { 
    const nativeEl: HTMLElement = this.el.nativeElement;
    nativeEl.setAttribute(this.uniqueAttr,'');
    nativeEl.appendChild(this.styleEl);
  }

  ngOnChanges(changes: SimpleChanges): void{
    this.updateColor();
  }

  updateColor(): void{
    // update dynamic style with the uniqueAttr
    this.styleEl.innerText = `
      [${this.uniqueAttr}] .mat-progress-bar-fill::after {
        background-color: ${this.appProgressBarColor};
      }
    `;
  }

}

as you can see that all that we are doing here is just making a new HtmlStyleElement and adding it just inside the host element.

And inside updateColor() method we are updating the innerText of the style tag we have appended. notice that we are using an attribute selector here with a unique attribute to minimize the scope of the style to the host only. because we want to override the style only for that progress-bar on which we have applied our directive.

you can use this directive in your template like this.

<mat-progress-bar [appProgressBarColor]="'orange'"
                  mode="determinate" 
                  value="40"></mat-progress-bar>

I hope this will help.

I ran into this issue and none of the solutions proposed actually solved the problem as I understood it. After working though some different ways of thinking about it, I believe that I figured out a manageable solution for dynamically changing the colors of mat-progress-bar when they are unknown before an API call (or user input). I've created an example on stackblitz to play with, but it ultimately works like this:

1. On init, create a style HTMLElement that you can reference later.
2. On whatever trigger you desire (in the example, it's change of the input value) clear the style element, re-assign the colors to custom css, and re-attach to head

// in app.component.ts

  styleElement: HTMLStyleElement;
  colors : Array<string> = ["#ff00ff", "#00ff00"];

changeColors() {
  const head = document.getElementsByTagName('head')[0];
  const css = `
  .style1 .mat-progress-bar-fill::after {
    background-color: ${this.colors[0]} !important;
  }

  .style2 .mat-progress-bar-fill::after {
    background-color: ${this.colors[1]} !important;
  }
  `;
  this.styleElement.innerHTML = '';
  this.styleElement.type = 'text/css';
  this.styleElement.appendChild(document.createTextNode(css));
  head.appendChild(this.styleElement);

}

ngOnInit() {
  this.styleElement = document.createElement('style');
  this.changeColors();
}

<!-- In app.component.html -->
<p>
  <mat-progress-bar mode="determinate" value=70 class="style1"></mat-progress-bar>
</p><p>
  <mat-progress-bar mode="determinate" value=40 class="style2"></mat-progress-bar>
</p>
<div><mat-form-field><input matInput type="color" placeholder="Style 1" [(ngModel)]="colors[0]" (change)="changeColors()" /></mat-form-field>
<mat-form-field><input matInput type="color" placeholder="Style 2" [(ngModel)]="colors[1]" (change)="changeColors()" /></mat-form-field></div>