角2：ボタンのクリックイベントの処理

Question

私は3つのボタンがあります。最初のボタンをクリックすると、そのテキストとCSSが変更され、同じボタンをクリックすると、以前のようにデフォルトのCSSが取得されます。私は3つすべてのボタンのためにこれが欲しい。私はこのコードを試しました。

.add_btn{ 
 
border:thin red solid; 
 
} 
 
.added_btn{ 
 
border:thin black solid; 
 
}

<button class="{{add_btn ? 'add_btn' : 'added_btn'}}" (click)="add_btn = !add_btn">{{add_btn ? 'addded' : 'add'}}</button> 
 
<button class="{{add_btn ? 'add_btn' : 'added_btn'}}" (click)="add_btn = !add_btn">{{add_btn ? 'addded' : 'add'}}</button> 
 
<button class="{{add_btn ? 'add_btn' : 'added_btn'}}" (click)="add_btn = !add_btn">{{add_btn ? 'addded' : 'add'}}</button>

私はそれらをクリックすることで、複数のボタンを追加することができます。

助けがあれば助かります。

ありがとうございます。

Answer 1

Angular2 +の機能NgClassを使用すると、HTML要素からCSSクラスを追加または削除できます。

Answer 2

<button class="added_btn" [ngClass]="{'add_btn' : add_btn}" (click)="add_btn = !add_btn">{{add_btn ? 'addded' : 'add'}}</button> 
<button class="added_btn" [ngClass]="{'add_btn' : add_btn}" (click)="add_btn = !add_btn">{{add_btn ? 'addded' : 'add'}}</button> 
<button class="added_btn" [ngClass]="{'add_btn' : add_btn}" (click)="add_btn = !add_btn">{{add_btn ? 'addded' : 'add'}}</button> 

.added_btn{ 
    border:thin black solid !important; 
}