CODEWITHSUNDEEP
angularangular-material
Raph
Raph

Reputation: 521

custom color for md-progress-circle angular2-material

I try to change the color of my md-progress-circle object to my custom color.

<md-progress-circle mode="determinate"></md-progress-circle>

How can I do ? There is no class to duplicate or override. In progress-circle.js I found this line : 

styles: [
    ... 
    :host path { 
        fill: transparent; 
        stroke: #00897b; 

        /** Stroke width of 10px defines stroke as 10% of the viewBox */ 
        stroke-width: 10px; 
    } 
    ...
]

Upvotes: 0

Views: 1810

Answers (2)

user3888130
user3888130

Reputation: 323

In Angular 2 (and Material 2): since it is an SVG element, you could just redefine its CSS style like that:

.mat-spinner path {
  stroke: #cccccc;
  stroke-width: 1px !important;
}

Upvotes: 0

yurzui
yurzui

Reputation: 214017

You could try to override styles this way: 

export function CustomComponent(annotation: any) {
  return function (target: Function) {
    var parentTarget = Object.getPrototypeOf(target.prototype).constructor;
    var parentAnnotations = Reflect.getMetadata('annotations', parentTarget);

    var parentAnnotation = parentAnnotations[0];
    Object.keys(parentAnnotation).forEach(key => {
      if (parentAnnotation[key] !== undefined && parentAnnotation[key] !== null) {
        if(Array.isArray(parentAnnotation[key])) {
          annotation[key] = [...parentAnnotation[key], ...annotation[key]];
        } else {
          annotation[key] = parentAnnotation[key];
        }
      }
    });
    var metadata = new ComponentMetadata(annotation);
    Reflect.defineMetadata('annotations', [ metadata ], target);
  }
}

@CustomComponent({
  styles: [`
     :host path { 
        stroke: red; 
    } 
  `]
})
export class CustomMdProgressCircle extends MdProgressCircle {
  constructor(_changeDetectorRef: ChangeDetectorRef) {
    super(_changeDetectorRef); 
  }
}

I've created custom component CustomMdProgressCircle that overrides origin MdProgressCircle Then you need to use it like this: 

directives: [CustomMdProgressCircle]

Here is a plunkr sample https://plnkr.co/edit/1sROtfRVOOfnpa5C9HFw?p=preview

Hope it helps you!

Upvotes: 1

Related Questions