0

Is there a way to style the icon of a completed step in Angular Materials stepper module? When I complete a step it adjusts the icon to a check mark. I'm trying to adjust the background color of the icon as well. My code is similar to the example here with linear mode enabled: https://material.angular.io/components/stepper/overview

When I look in the DOM the only attribute that changes when it is completed is the 'ng-reflect-ng-switch' attribute. I'm not sure how I can target this element in order to style it upon completion. Hopefully someone can point me in the right direction. Thanks!

Kyle
  • 127
  • 2
  • 2
  • 11

1 Answers1

0

I got this working by targeting the elements attribute like this:

[ng-reflect-ng-switch~="done"] {
  background-color: green;
}
Kyle
  • 127
  • 2
  • 2
  • 11
  • 1
    Using ng-reflect attributes for styling is a bad idea since they are for debugging purposes and are not available in production environments. – Sergio Álvarez May 16 '18 at 09:04