1

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.

Edric
  • 24,639
  • 13
  • 81
  • 91
Zlatko
  • 18,936
  • 14
  • 70
  • 123

2 Answers2

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

penleychan
  • 5,370
  • 1
  • 17
  • 28
  • I know /deep/ is going away, but I need this for now. Anyway, TIL about `:host ::ng-deep` :) – Zlatko Jul 20 '17 at 08:34
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).

Zlatko
  • 18,936
  • 14
  • 70
  • 123