각도 2 버튼의 스타일을 변경합니다. onClick

Question

클릭시 버튼의 스타일을 업데이트하는 데 많은 문제가 있습니다.

먼저, 여기에 원래 마크 업입니다 : "btn btn-remove"

변경에

1. 변경 "btn btn-add"에서 클래스 : 버튼을 클릭에

   <button class="btn btn-add" (click)="handleButtonClick(id)"> 
       Add<i class="fa fa-plus-circle"></i> 
   </button> 
   

   , 나는에 노력하고 있습니다 <i class="fa fa-plus-circle"> to <i class="fa fa-minus-circle">

어떻게 이것을 2 각형으로 할 수 있습니까? 방금 부울을 추가하고 플립 한 다음 값에 따라 다른 템플릿을 표시합니다. 그러나 일부 기능을 통해이 문제를 해결할 수있는 방법이 있어야 할 것 같습니다. 이 문서에서는 여러 클래스의 공백으로 구분 된 문자열을 사용할 수 있다고 말했지만 그 방법을 모르겠습니다. 당신이 ngClass을 시도했지만에 문제가 있다고, 당신이 언급 한 귀하의 의견에

<button class="btn" [ngClass]="{'btn-add': !clicked, 'btn-remove': clicked}" (click)="clicked = true"> 
    Add<i class="fa" [ngClass]="{'fa-plus-circle': !clicked, 'fa-minus-circle': clicked}"></i> 
</button> 

Answer 1

:

은이 지침은 키 및 부울 클래스 명을 가진 객체 기대를

Answer 2

이 코드를 시도 할 수 있습니다 가치로서의 표현. 표현식이 참이면 클래스가 추가되고 그렇지 않으면 제거됩니다. ngClass의 이해에

<button class="btn" [ngClass]="{ 'btn-add': isAddButton, 'btn-remove': !isAddButton }"> 
</button> 

희망이 도움이 후 : 당신 버튼 클래스 btn을 가지고 있으며, 당신은 아마 이런 일을하는 것보다, btn-add 또는 btn-remove 중 하나가 부울 값에 따라해야한다 예를 들어

다른 용도로 사용하는 것은 문제가되지 않습니다.

Answer 3

도 버튼의 텍스트를 전환하려면 :

<button class="btn" [ngClass]="{'btn-add': !clicked, 'btn-remove': clicked}" (click)="clicked = !clicked"> 
    {{clicked ? 'Remove' : 'Add'}} 
    <i class="fa" [ngClass]="{'fa-plus-circle': !clicked, 'fa-minus-circle': clicked}"></i> 
</button>