CODEWITHSUNDEEP
angular-material
Jacob L
Jacob L

Reputation: 153

Cannot change mat-spinner's colour

I know this question has been asked (Change color of mat-spinner) but I was wondering if there's been a solution to not using the deprecated ::ng-deep?

In addition, I've also tried the method suggested in the link but that doesn't work:

HTML

<mat-progress-spinner *ngIf="pending" mode="indeterminate" class="mat-spinner-color"></mat-progress-spinner>

SCSS

.mat-spinner-color::ng-deep circle{
    stroke: #FFFFFF !important;
}

Thanks in advance!

Upvotes: 3

Views: 4200

Answers (2)

Jiraheta
Jiraheta

Reputation: 481

In my case, I used ::ng-deep and it is still working.

below worked for me.

    .mat-mdc-progress-spinner::ng-deep {
    --mdc-circular-progress-active-indicator-color: #006FB9;
   }

Upvotes: 0

Marshal
Marshal

Reputation: 11081

::ng-deep is not officially deprecated and is contingent upon browsers removing support for it, per angular.io, until then, meaning is officially deprecated by the browsers, it should be preferred over /deep/ and >>> for broader compatibility.

As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.

https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

If your preference is to avoid ::ng-deep you will need to apply your modifications for the mat-spinner to the root styles.css in your project

in styles.css

.orange-spinner circle{
  stroke:orange !important;
}

add class

<mat-spinner class="orange-spinner"></mat-spinner>

Stackblitz

https://stackblitz.com/edit/angular-czd4zq?embed=1&file=styles.css

Please note:

Per UmutEsen comment below, the correct solution is to setup a theme and leverage the color input on the mat-spinner.

https://material.angular.io/guide/theming

Upvotes: 7

Related Questions