Angular disable button after click?

Question

I have multiple button im trying to disable the button after getting the response.Im using ngClass to disable the button after the getting the response

<tr *ngFor="let item of data">

  <td>{{item.username}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.email}}</td>
                    <td>{{item.phone}}</td>
                   <td><button  type="button" [ngClass]="{disabled : item.username === name }" (click)="changestatus(item.username)" class="btn btn-success btn-xs" >Change Status</button></td>

</tr>

And my changestatus function

public name : string ;

 changestatus(username : string){

         this.httpService.changeuserstatus({uname : username }).subscribe(data => {

           this.name = (data.data == 1) ? username : "no";

         })

  }

im assigning the username value to the name variable and if both matches i will disable the button

The problem is if i click the 1st button after the getting response it is disabled but when i click the 2nd button the after getting response 1st button is enabled and the 2nd button becomes disabled.But the thing is need to disable both buttons. Help me thanks in advance

Answer 1

@maciej-caputa is correct regarding the use of [disabled] rather than a class, but your error is actually due to your application logic.

Your function changestatus() updates the global variable this.name. This will affect all rows, since their disabled state is conditional on 'item.username === name'

Try the following - I'm assuming that item is of a type called User (to which you will need to add a new property isDisabled:

Model:

export class User {
  username: string;
  name: string;
  email: string;
  phone: string;
  isDisabled: boolean;
}

component.html:

<tr *ngFor="let item of data">
    <td>{{item.username}}</td>
    <td>{{item.name}}</td>
    <td>{{item.email}}</td>
    <td>{{item.phone}}</td>
    <td><button  type="button" [disabled]="item.isDisabled" (click)="changestatus(item)" class="btn btn-success btn-xs" >Change Status</button></td>
</tr>

component.ts:

    changestatus(user: User){
        this.httpService.changeuserstatus({uname : user.username }).subscribe(data => {
            user.isDisabled = (data.data == 1);
        });
    }

Very simple plunkr demonstrating a working version: https://plnkr.co/edit/quLBCMoFtragJ32OBTvp

Answer 2

To really have disabled button you need to use disabled attribute on button element otherwise you will only change styles but still be able to click it. In angular2 you can bind to an attribute as follows.

<button [disabled]='item.username === name'></button>