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: stackoverflow.com/questions/38618463/… — Awais
– Awais, Commented Jul 10, 2017 at 11:58
Try this: [ngClass]="{disabled : item.temp || (item.username === name && item.temp = true) }" — Slava Utesinov
– Slava Utesinov, Commented Jul 10, 2017 at 12:02

Steve Land · Accepted Answer · 2017-07-11 14:09:31Z

8

@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

edited Jul 11, 2017 at 14:09

answered Jul 10, 2017 at 12:19

Steve Land

4,8622 gold badges20 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Arun Kumaresh Over a year ago

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

Steve Land Over a year ago

@ArunKumaresh There were some typos before - The plunkr demonstrates a working version using this approach

Maciej Caputa · Accepted Answer · 2017-07-10 12:09:45Z

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, 2017 at 12:09

answered Jul 10, 2017 at 12:01

Maciej Caputa

1,91114 silver badges23 bronze badges

4 Comments

Arun Kumaresh Over a year ago

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

Maciej Caputa Over a year ago

You can move item.username === name to a public method on a component and then call <button [disabled]='isDisabled()'></button> 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).

Arun Kumaresh Over a year ago

note i have i multiple buttons what you saying will work when there is single buttons

Maciej Caputa Over a year ago

Add a class to it, e.g. <button class='original-button' [disabled]='item.username === name'></button> and then in css .original-button:disabled.

Yoav Schniederman · Accepted Answer · 2017-07-10 12:35:13Z

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, 2017 at 12:35

Yoav Schniederman

5,4033 gold badges30 silver badges32 bronze badges

Collectives™ on Stack Overflow

Angular disable button after click?

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related