Угловой материал: динамически менять цвет кнопки

Question

У меня есть кнопка с 3-мя возможными состояниями:

1. Кликабельно
2. Отключено
3. Активно

Код кнопки похож наэто:

<button mat-raised-button
              color="primary"
              [disabled]="anotherStarted"
              (click)="startButton = true">START</button>

Кнопка primary при нажатии.Он отключен, когда запущен другой процесс.

Что я не могу понять из документации, так это как изменить его цвет, чтобы отметить, что он теперь активен (например, когда startButton имеет значение true).

Есть ли способ сделать это?

Answer 1

Здесь вы можете сделать это несколькими способами.

Вариант 1: использование цветовых вариаций материала

Согласно документации цвет также является входным, поэтому вы можете связать любое свойство, которое захотите. Здесь любой материал означает ThemePalette. Пример: Первичный, Предупредить и Акцент

<button mat-raised-button
              [color]="paletteColour"
              [disabled]="anotherStarted"
              (click)="startButton = true; change()">START</button>

На вашем компоненте,

paletteColour = 'primary';
change() {
 paletteColour = 'warn';
}

Это просто для того, чтобы дать вам представление о том, как изменить цвет кнопки, используя материал ThemePalette. Используйте свою собственную логику, чтобы изменить цвет, как мудрый.

Вы заметите это довольно просто и ограниченно. Так что будем работать дальше.

Вариант 2. Использование привязок угловых стилей

Используя свойство Angular style.background-color, вы можете связать любой цвет по вашему желанию.

<button mat-raised-button
              [style.background-color]="btnColour"
              [disabled]="anotherStarted"
              (click)="startButton = true; change()">START</button>

На вашем компоненте,

btnColour= 'red';
change() {
 btnColour= 'green';
}

Надеюсь, вы сможете получить четкое представление о динамическом изменении цвета mat-button. Используйте свою собственную логику.!