Angular點擊按鈕后，更改樣式

.css 類

.btnRequest{

  font-size: 12px;

  padding-left: 18px;

  padding-right: 18px;

  border-width: 0px;

}

.selectedButtonStyle{

  border-width: 1px; 

  border-color: blue;

  background-color: white;

}

 

.html類

    <div>

      <button class="btnRequest" (click)="ShowPayeeRequest()" 

         [class.selectedButtonStyle]="ShowPayee"  >Payee Request</button>

      <button class="btnRequest" (click)="ShowCheckRequest()"

         [class.selectedButtonStyle]="ShowCheck" >Check Request</button>

    </div>

 

主要是 [class.selectedButtonStyle] 來控制，是否追加額外樣式。

 

如圖，當選中了對應的按鈕后，將其樣式更改。

 

 

 

 

V2.0

關於圖標樣式的更新

.html中

<div class="clr-col-md-12">

      <clr-icon shape="list" (click)= "navigateToAdmin('pendingrequest')" title="Pending Approval Request" size = 20  [ngClass]="{isDisable: allowManageApprover}"></clr-icon>

</div>

 

.css中

.isDisable{

  color:blue;

}

 

.ts中

控制allowManageApprover值true or false

 

顯示效果如下