更改点击按钮的背景颜色 [英] Change background color of the button on click

问题描述

我有一个按钮，单击后将其文本更改为enable和disable.

I have a button that changed its text to enable and disable on click.

我还如何更改按钮颜色

例如更改为enable上的绿色和disable

For e.g. change to Green on enable and Red on disable

<button (click)="enableDisableRule()">{{status}}</button>

组件

toggle = true;
status = 'Enable'; 

enableDisableRule(job) {
    this.toggle = !this.toggle;
    this.status = this.toggle ? 'Enable' : 'Disable';
}

感谢您的帮助.谢谢

推荐答案

为此，您可以使用ngClass指令，使用两个不同的CSS类，它们将基于toggle的布尔值触发:

You can use ngClass directive for that purpose using two different css classes that will be triggered based on the boolean value of toggle :

模板:

<button 
    (click)="enableDisableRule()" 
    [ngClass]="{'green' : toggle, 'red': !toggle}">
    {{status}}
</button>

css

.green {
    background-color: green;
}

.red {
    background-color: red;
}

ts

toggle = true;
status = 'Enable'; 

enableDisableRule(job) {
    this.toggle = !this.toggle;
    this.status = this.toggle ? 'Enable' : 'Disable';
}

演示

这篇关于更改点击按钮的背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！