Angular - Material: Progressbar Custom Color

Angular - Material: Progressbar custom color?

I can suggest to change one of the premade primary/warn/accent colors to your custom color.

In your styles.scss (if your style file is css you will have to change it to support scss):

  @import '~@angular/material/theming';
  // Plus imports for other components in your app.

  // Include the common styles for Angular Material. We include this here so that you only
  // have to load a single css file for Angular Material in your app.
  // Be sure that you only ever include this mixin once!
  @include mat-core();

  // Define the palettes for your theme using the Material Design palettes available in palette.scss
  // (imported above). For each palette, you can optionally specify a default, lighter, and darker
  // hue.

  $mat-blue: (
    50: #e3f2fd,
    100: #bbdefb,
    200: #90caf9,
    300: #64b5f6,
    400: #42a5f5,
    500: #2196f3,
    600: #1e88e5,
    700: #1976d2,
    800: #1565c0,
    900: #0d47a1,
    A100: #82b1ff,
    A200: #448aff,
    A400: #2979ff,
    A700: #2B66C3,
    contrast: (
      50: $black-87-opacity,
      100: $black-87-opacity,
      200: $black-87-opacity,
      300: $black-87-opacity,
      400: $black-87-opacity,
      500: white,
      600: white,
      700: white,
      800: $white-87-opacity,
      900: $white-87-opacity,
      A100: $black-87-opacity,
      A200: white,
      A400: white,
      A700: white,
    )
  );

  $candy-app-primary: mat-palette($mat-blue, A700);
  $candy-app-accent:  mat-palette($mat-orange, A200, A100, A400);

  // The warn palette is optional (defaults to red).
  $candy-app-warn:    mat-palette($mat-red);

  // Create the theme object (a Sass map containing all of the palettes).
  $candy-a-theme($candy-app-theme);
pp-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

  // Include theme styles for core and each component used in your app.
  // Alternatively, you can import and @include the theme mixins for each component
  // that you are using.
  @include angular-material

Change angular material progress bar color from code

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.

Change mat-progress-bar color depending on value

Have you tried:

    <mat-progress-bar 
       mode="determinate" 
       [color]="updateColor(user.progress)"
       value="{{user.progress}}">
    </mat-progress-bar>

with:

    updateColor(progress) {
       if (progress<21){
          return 'primary';
       } else if (progress>80){
          return 'accent';
       } else {
         return 'warn';
       }
    }

Change multi mat-progress-bar color based on status?

I'm assuming that you are looping your data object in a table or somewhere else. So, you can add color field to your object. Whenever required, change color of that object to warn / primary / accent.

In .html:

<mat-spinner color="{{element.color}}"></mat-spinner>

If it is mat-table, you may require to re-render table after changing the color of an object. Add the following in .ts:

@ViewChild(MatTable, {static: false}) table: MatTable<tableType>;

After applying changes to color:

table.renderRows()

MdProgressBar buffer background color in Angular Material

Not sure if this will be any better, however since /deep/ and >>> will be deprecated from browsers support, angular have it's own way to emulate this using ::ng-deep and is the prefer way until better solution is found.

Documentation on angular says it will be deprecated however on github vicb mention that they have no plan to remove ::ng-deep in a near future.

Usage is similar to /deep/:

::ng-deep .mat-progress-bar-buffer {}

Angular Material Multi Progress Bar using multiple colors

I don't know of an easy way to do that staying inside Angular Material.

The easiest way is probably to go down the flex road, with some css styling.

I made a very basic Stackblitz to showcase the idea. Then you can CSS style all of this and get what you want.

Another way to go is to build the bar using SVG. You can achieve more powerful effects, but it comes at the cost of writing a bit of SVG yourself (basically rect elements, and then you can improve on that).

Edit: OP's fine-tuning of the Stackblitz to match the initial image: https://stackblitz.com/edit/angular-u2stx8.

Angular custom mat chip color

You need to add CSS class instead of color="primary"
Create you own CSS class

.assigned-chip{
     background-color: <<color code>> // as per your requirement
}

<mat-chip *ngIf="status.name==='assigned'" class="assigned-chip">{{status.display_name}}</mat-chip>

---

Related Topics