Angular Material progress bar, using custom colors

Question

I have a Angular 5 project where I’m using a material progress bar. I want to use custom colors. I’ve tried several workarounds (including previous SO questions) , but cannot break the code. I want to change the color based on percent progress. HTML:

<mat-progress-bar *ngIf="cell.name === 'progress'" [value]="cell.value" 
    class="mat-progress-bar-round my-color" [ngClass]="'color ' + ((cell.value <= 
     30) ? 'color-red' : (cell.value < 70) ? 'color-yellow' : 'color-green')">   
    </mat-progress-bar>`

sass (css):

   mat-progress-bar {
      &.mat-progress-bar-big {
        padding: 13px 0;
      }

      &.mat-progress-bar-round {
        border-radius: 11px;
        height: 6px;

        .mat-progress-bar-buffer {
          background-color: $grey3;
        }

        .mat-progress-bar-fill {
          &::after {
            border-radius: 11px;
          }
        }

        &.color {
          .mat-progress-bar-fill {
            &::after {
              animation: none;
              content: '';
              display: inline-block;
              left: 0;
            }
          }

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

          &.color-yellow {
            .mat-progress-bar-fill {
              &::after {
                background-color: $yellow;
              }
            }
          }

          &.color-green {
            .mat-progress-bar-fill {
              &::after {
                background-color: $green;
              }
            }
          }

          &.color-aqua {
            .mat-progress-bar-fill {
              &::after {
                background-color: $aqua;
              }
            }
          }
        }
      }
    }

Any help VERY much appreciated...:-)

[Check this answer](https://stackoverflow.com/a/56917234/1160236). It uses a custom directive to change mat-progress-bar color dynamically. — HirenParekh, Aug 31 '19 at 10:12

SaiLekkala · Answer 1 · 2018-09-15T06:36:18.520

2

https://i.stack.imgur.com/P98jU.png

/deep/ .mat-progress-bar-fill::after {
    background-color: green;
}

/deep/ .mat-progress-bar-buffer {
    background: #E4E8EB;
}

edited Sep 15 '18 at 06:36

answered Sep 15 '18 at 05:18

SaiLekkala

41
5

Angular is deprecated. – Dem Pilafian Aug 30 '19 at 05:35

score 0 · Answer 2 · edited Jun 20 '18 at 06:56

0

Setting the color in .ts file worked for me

<mat-progress-bar [value]="cell.value"  [color]="cell.color">   
</mat-progress-bar>

and in .ts file,

cell.color = 'primary'; //predefined color in default theme

I believe you can replace 'primary' with your custom color

edited Jun 20 '18 at 06:56

Edric

24,639
13
81
91

answered Jun 19 '18 at 15:11

user2881088

21
3

Using [color] and setting theme colors works fine. What U mention works OK for me too.Try using a custom color, not a theme color. – SveinS Jun 19 '18 at 16:55
The color property only accepts three values: `primary`/`accent`/`warn` – Edric Jun 20 '18 at 06:56

Angular Material progress bar, using custom colors

2 Answers2

Linked