CODEWITHSUNDEEP
angular
Shail
Shail

Reputation: 101

How do I disable a button in a table dynamically?

enter image description here

In the above table screenshot, I want to disable the Approve button once the user is Approved (i.e, the button is slid to right). The button on click calls an API which updates is_confirm filed (boolean type) in DB and the same field is being used for disabling the button. But the button is not getting disabled, it can still be slid.

<tr *ngFor="let user of users">
    <td>{{ user.name }}</td>
    <td>{{ user.userName }}</td>
    <td>{{ user.occupation }}</td>
    <td>{{ user.maritalStatus }}</td>
    <td>{{ user.mobileNo }}</td>
    <td>
        <div class="row">
            <div class="col-sm-4"><button class="btn"(click)="viewUserDetails(user.id)"><i class="fa fa-address-card fa-lg" aria-hidden="true"></i></button></div>
            <div class="col-sm-4"><label class="switch">
                    <input type="checkbox" [disabled]="user.isConfirm" [checked]="user.isConfirm" (change)="approveUserById(user.id)">
                    <span class="slider round"></span>
            </label></div>
            <div class="col-sm-4"><button class="btn" (click)="lockOrUnlockUserById(user)"><i [ngClass]="user.isLock ? 'fa fa-unlock fa-lg' : 'fa fa-lock fa-lg'" aria-hidden="true"></i></button></div>
        </div>
    </td>
</tr>


Component.ts

//Method to get all the users called in onInit

  viewUsersList(roleId: string) {
    
    let cityObj = {roleId:roleId,cityId:this.selectedCity}
    
    this.httpClient.post('USER_LIST_API', cityObj).subscribe(
        (responseData: any) => {
          this.users = <ViewUser[]>responseData
          console.log("Response Data: ",responseData)
          console.log(this.users)
        },
        (error: any) => {
          console.log(error)
          this.router.navigate(['error']);
        }
      )
  }

  //Method to approve a user

  approveUserById(userId: string) {

    this.httpClient.post('APPROVE_USER_API', userId).subscribe(
      (responseData: any) => {
        if (responseData.message === 'TRUE') {
            
            //*This is the place I need help to refresh the data *
          console.log("Response ",responseData)
        }
      }
    )

Upvotes: 0

Views: 453

Answers (2)

nXn
nXn

Reputation: 954

Try [disabled]="!user.isConfirm"

 <input type="checkbox" [disabled]="!user.isConfirm" [checked]="user.isConfirm" (change)="approveUserById(user.id)">
                    <span class="slider round"></span>
```

Upvotes: 1

Raz Ronen
Raz Ronen

Reputation: 2628

Try: <button [disabled]="!is_confirm" ...>

Upvotes: 0

Related Questions