angular - How to add custom color in @angular2-material?

Question

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!

Answer 1

您需要添加自己的自定义颜色主题，然后您可以设置[color]='primary'等，创建自己的主题的文档在这里

Answer 2

如果条件错误，请在您的 ts 文件中：

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

您也可以尝试 [ngClass]="checked === true ? 'redColorClass' : 'greenColorClass'"

并在 component.css 中设置您的 redColorClass 和 greenColorClass 类以显示所需的颜色。