Angular 2：处理按钮的单击事件

Question

I have 3 buttons. when I click on 1st button then its text and css gets changed and when I click on the same button then I get default css as before. I want this for all 3 buttons. I have tried this code.

 .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> 

I can add multiple buttons by clicking on them.

Any help would be great.

Thank You.

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