Angular – Material: Progressbar custom color?

Question

You can use ::ng-deep selector to achieve what you want, this answer has some info on it.

How I did it:

CSS

::ng-deep .mat-progress-bar-fill::after {
    background-color: #1E457C;
}

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

::ng-deep .mat-progress-bar {
    border-radius: 2px;
}

HTML

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

And the result is this:

enter image description here

EDIT:

I found a way to avoid using ::ng-deep as it will be removed from angular soon.
It seems that if you move your style from your component.css file to the global styles.css file it will work without ::ng-deep.

So, a style defined above can change in

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

Move it to styles.css and it will be applied like this:

enter image description here

LATER EDIT

As an explanation why setting styles in the global style sheet works:

For components the default is that angular adds a attribute to each
DOM-element of a component, and then adds the same attribute to every
class in the css for the same component. Adding styles to a global
stylesheet does not add these attributes, hence the style will be
applied.
(thanks Jompis for this)

This worked for me on a new project. I did not checked specifically with the old code but the conditions are the same and there is no reason for it not to work.

Leave a Comment Cancel reply