Angular Material — это мощная библиотека компонентов пользовательского интерфейса для приложений Angular. Он предоставляет широкий спектр готовых компонентов, включая опцию mat-list, которая позволяет пользователям выбирать элементы из списка. В этой статье мы рассмотрим различные методы изменения цвета опции mat-list, когда она выбрана. Мы предоставим примеры кода для каждого метода, что позволит вам реализовать желаемое изменение цвета в ваших проектах Angular Material.

Метод 1: использование классов CSS
Один из способов изменить цвет параметра mat-list-option при выборе — использовать классы CSS. Вы можете определить собственные классы CSS и применять их динамически в зависимости от состояния выбора. Вот пример:

<mat-selection-list>
  <mat-list-option [ngClass]="{'selected-option': option.selected}" *ngFor="let option of options">
    {{ option.label }}
  </mat-list-option>
</mat-selection-list>

.selected-option {
  background-color: blue;
  color: white;
}

Метод 2: использование тем Angular Material
Angular Material обеспечивает поддержку тем, позволяя настраивать внешний вид компонентов, включая опцию mat-list-option. Вы можете определить собственные темы и применить их к своему приложению. Вот пример:

@import '~@angular/material/theming';
// Define your custom theme
$custom-theme: mat.define-light-theme(
  (
    color: (
      primary: mat-palette($mat-blue),
    ),
  )
);
// Apply the custom theme
@include mat.all-component-themes($custom-theme);
// Override the selected option color
.mat-list-option.mat-list-item-selected {
  background-color: blue;
  color: white;
}

Метод 3: использование привязки хоста.
Другой подход — использовать декоратор @HostBindingдля динамического применения стилей к параметру mat-list-option на основе его состояния выбора. Вот пример:

import { Component, HostBinding } from '@angular/core';
@Component({
  selector: 'app-list',
  template: `
    <mat-selection-list>
      <mat-list-option (click)="onOptionClick(option)" [class.selected]="option.selected" *ngFor="let option of options">
        {{ option.label }}
      </mat-list-option>
    </mat-selection-list>
  `,
  styles: [`
    .selected {
      background-color: blue;
      color: white;
    }
  `]
})
export class ListComponent {
  options: any[] = [];
  onOptionClick(option: any) {
    option.selected = !option.selected;
  }
  @HostBinding('class.selected')
  get isSelected() {
    return this.options.some(option => option.selected);
  }
}

Изменить цвет опции mat-list при выборе можно различными способами. В этой статье были рассмотрены три подхода: использование классов CSS, использование тем Angular Material и использование декоратора Host Binding. Следуя предоставленным примерам кода, вы можете легко реализовать желаемое изменение цвета в своих проектах Angular Material. Поэкспериментируйте с этими методами и выберите тот, который лучше всего соответствует требованиям вашего приложения.