Angular - Material: Progressbar custom color?

Question

I am now trying for hours. I use Material2 and simply want to change the color of the progress-bar. I know there are those themes (primary/accent/warn) but I want to have a cutom color (green) for my progressbar.

I already tried the wierdest css-combinations.. but with no effort. Maybe someone had the same problem?

Answer 1

For me I just need to put in CSS this rule:

div.mat-progress-bar-primary.mat-progress-bar-fill.mat-progress-bar-element::after{ background-color: green; }

But clearly is easier if you use a theme.

Answer 2

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:

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:

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.