Как изменить цвет мат-слайд-тумблера с помощью html (Angular)

Question

Для проекта я использовал mat-slide-toggle библиотеки материалов. Теперь я хочу изменить цвет ползунка и круга, которые являются классами mat-slide-toggle-bar и mat-slide-toggle-thumb. Я могу установить background-color обоих через css -файл, но здесь есть подвох. У меня есть несколько ползунков, которые нуждаются в разных цветах. Цвета определяются в наборе данных, доступном в компоненте. Я могу получить доступ к этому набору данных в html, но не в css. Я не могу использовать style="background-color: ..." на mat-slide-toggle, потому что это не тот класс. Два класса, которые мне нужны, не видны непосредственно в html.

Html выглядит следующим образом:

<span *ngFor="let data of dataSets">
<mat-slide-toggle (change)="toggleDataSet($event)">{{data.label}}</mat-slide-toggle>
</span>

Поэтому мне нужно получить доступ к набору данных в css или как-то быть в состоянии установить цвет фона для вложенных классов, не видимых в html. Есть ли способ сделать это?

Answer 1

Для динамического изменения цвета ползунков вы можете создать Directive, который получает цвет для круга и цвет для ползунка в качестве входных данных. Директива добавляет атрибуты к элементу и добавляет стиль, необходимый для изменения цветов:

Здесь приведен аналогичный ответ для изменения цвета индикатора выполнения: Изменить angular Цвет индикатора выполнения материала из кода .

Необходимая директива выглядит следующим образом:

@Directive({
  selector: '[sliderColor]'
})
export class SliderColorDirective implements OnChanges {
  static sliderNumberCounter = 0;

  @Input() circleColor: number;
  @Input() sliderColor: number;
  styleElement: HTMLStyleElement = document.createElement('style');

  attributeName: string;

  constructor(private el: ElementRef) {
    this.attributeName = `slider-color-${SliderColorDirective.sliderNumberCounter}`;
    SliderColorDirective.sliderNumberCounter++;
    const nativeEl: HTMLElement = this.el.nativeElement;
    nativeEl.setAttribute(this.attributeName, '');
    nativeEl.appendChild(this.styleElement);
  }

  ngOnChanges(): void {
    this.setColors();
  }

  setColors(): void {
    this.styleElement.innerText = `
      [${this.attributeName}] .mat-slide-toggle-bar {
        background-color: ${this.sliderColor};
      }
      [${this.attributeName}] .mat-slide-toggle-thumb {
        background-color: ${this.circleColor};
      }
    `;
  }
}

Директива может использоваться следующим образом:

<mat-slide-toggle sliderColor [sliderColor]="'red'" [circleColor]="'black'">{{data.label}}</mat-slide-toggle>