Search code examples
angularangular2-material

How to add custom color in @angular2-material?

I am try to add my custom color like red and green in @angular2-material/slide-toggle. If slide-toggle is disabled so color is red and if enabled so color is green.

My component.html code here:- 

<md-slide-toggle
      (change)="testChange($event)"
      [color]="myColor">
</md-slide-toggle>

My component.td code here :- 

myColor;
testChange(event) {
  alert(event)
  if(event == true)
  {
    this.myColor = "#006400";
  }
  else
  {
    this.myColor = "#FF0000";
  }
}

I repeat my questions:-

  1. How to add custom color in angular2 material slide-toggle?
  2. If slider-toggle is disabled so color is red otherwise green.

Thanks!

Solution

  • You need to add your own custom colour theme, then you can set [color]='primary' etc, the docs to create your own theme are here