Блог

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

1. Интерактивно
2. Отключено
3. Активен

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

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

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

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

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

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

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

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

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

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

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

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

Вы заметите, что это довольно просто и ограничено. Итак, мы рассмотрим вариант 2.

Вариант 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 цвета. Используйте свою собственную логику.!

Другой способ сделать это:

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