MdProgressBar buffer background color in Angular Material

Question

I'm using progress bar from Angular Material and trying to custom-style it. I can set the borders, radiues, color of the progressed part (buffer?) simply by styling the element itself (e.g. md-progress-bar { border: 1px solid black }) but I cannot add the background color for the bar. If I change the background color of the .mat-progress-bar-buffer via dev tools, it works, but if not via component css (or any other css, for that matter).

So, this doesn't work:

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

What else can I try?

Edit: here's a simple plunker to play with.

I am not sure they used background-image with some svg in .mat-progress-bar-background. — Hareesh
– Hareesh, Commented Jul 19, 2017 at 19:48
Try opening the plunker, find that element in dev tools. If you add background-color: white to it, it works. — Zlatko
– Zlatko, Commented Jul 19, 2017 at 19:49

penleychan · Accepted Answer · 2017-07-19 20:24:35Z

2

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 {}

answered Jul 19, 2017 at 20:24

penleychan

5,4971 gold badge20 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Zlatko Over a year ago

I know /deep/ is going away, but I need this for now. Anyway, TIL about :host ::ng-deep :)

Zlatko · Accepted Answer · 2017-07-19 19:55:38Z

1

Well, it's due to ViewEncapsulation. If I add /deep/ .mat-progress-bar-buffer, the style is applied.

I'd still like to find a better solution (with /deep/ being all but gone).

answered Jul 19, 2017 at 19:55

Zlatko

19.7k14 gold badges76 silver badges130 bronze badges

Collectives™ on Stack Overflow

MdProgressBar buffer background color in Angular Material

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related