web-dev-qa-db-ja.com

クリックでボタンの背景色を変更する

クリックするとテキストがenableとdisableに変わるボタンがあります。

ボタンの色を変更するにはどうすればよいですか？

たとえばenableで緑、disableで赤に変更

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

成分

toggle = true;
status = 'Enable'; 

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

どんな助けでもありがたいです。ありがとう

angulartypescriptng-class
3
surazzarus

Toggleのブール値に基づいてトリガーされる2つの異なるcssクラスを使用して、ngClassディレクティブをその目的で使用できます。

テンプレート：

<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';
}

デモ

1
kboul

ボタンで[ngClass]を使用して、適切なスタイルクラスを適用します。

<button (click)="enableDisableRule()"
    [ngClass]="{'enabled': toggle, 'disabled': !toggle}">
        {{status}}
</button>
0
Faisal

背景色のみを変更したい場合は、スタイルバインディングを使用できます。

<button [style.background-color]="toggle ? 'green' : 'red'" (click)="enableDisableRule()">
  {{status}}
</button>

デモについては this stackblitz を参照してください。

0
ConnorsFan

デフォルトのtoggleがtrueの場合、そのデフォルトのクラスは.toggleです。 Css優先度を使用して[ngClass]を置き換えます。

<button (click)="enableDisableRule()" class="toggle" [class.btn--disable]="!toggle">{{status}}</button>

Cssオーダーの場合、toggleはdisableを上回ります。

.toggle { background-color:green; }
.btn--disable { background-color:red; }
0
Rach Chen