Angular - Material: Progressbar custom color?
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, Here is how I got it working,
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>
Since nobody mentioned so far...
He's how I solved it.
@Meet Dave is right about his approach. But you should use encapsulation: ViewEncapsulation.None
(disables css modules)
Something like this:
Component
@Component({
selector: '...',
templateUrl: '...',
styleUrls: ['...'],
encapsulation: ViewEncapsulation.None,
})
Sass (in my case)
.audio-progress-bar {
&.mat-progress-bar {
height: 10px;
}
.mat-progress-bar-fill::after {
background-color: #37474f;
}
.mat-progress-bar-buffer {
background-color: #90a4ae;
}
/* remove animation and the dots*/
.mat-progress-bar-background {
animation: none;
background-color: #eceff1;
fill: #eceff1;
}
}
View
<mat-progress-bar
class="audio-progress-bar"
mode="buffer"
></mat-progress-bar>
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.