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

Possible duplicate of: https://stackoverflow.com/questions/38618463/disable-submit-button-after-one-click-in-angularjs — Awais, Jul 10 '17 at 11:58
Try this: `[ngClass]="{disabled : item.temp || (item.username === name && item.temp = true) }"` — Slava Utesinov, Jul 10 '17 at 12:02

Steve Land · Accepted Answer · 2017-07-11T14:09:31.743

@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

i have multiple buttons and if click the 1st button it should be disable and i click the 2nd button it should be disabled without enabling the 1st button and your answer enables the 1st button on clicking the 2nd button — Arun Kumaresh, Jul 11 '17 at 13:07
@ArunKumaresh There were some typos before - The plunkr demonstrates a working version using this approach — Steve Land, Jul 11 '17 at 14:10

Maciej Caputa · Answer 2 · 2017-07-10T12:09:45.033

6

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>

edited Jul 10 '17 at 12:09

answered Jul 10 '17 at 12:01

Maciej Caputa

1,831
12
20

this what i have also tried but gives the same result what i mentioned.The problem is every time the name variable gets the new value – Arun Kumaresh Jul 10 '17 at 12:11
You can move `item.username === name` to a public method on a component and then call `` it's a good practise and might help you double check the logic. If you need to style it then refer to it by `button:disabled` (`:disabled` pseudo class). – Maciej Caputa Jul 10 '17 at 12:15
note i have i multiple buttons what you saying will work when there is single buttons – Arun Kumaresh Jul 10 '17 at 12:17
Add a class to it, e.g. `` and then in css `.original-button:disabled`. – Maciej Caputa Jul 10 '17 at 12:19

score 0 · Answer 3 · answered Jul 10 '17 at 12:35

0

html:

<button type="button"
        (click)="changestatus(item.username)"
        [disabled]='isDisabled(item)' 
        class="btn btn-success btn-xs">Change Status</button>

TS :

isDisabled(item) : boolean {
 return item && item.username === name;
}

answered Jul 10 '17 at 12:35

Yoav Schniederman

5,253
3
28
32

Angular disable button after click?

3 Answers3