How to Disable Button After (Click) in Angular

How to disable button after (click) in Angular

You can bind the disabled property to a flag (e.g. clicked), and set the flag in the click event handler:

<button type="button" [disabled]="clicked" (click)="actionMethod(); clicked = true;" class="btn btn-primary">Give Kitchen access</button>

The flag should be declared in the component class:

clicked = false;

See this stackblitz for a demo.

Angular disable button after click?

@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

Permanently disable button after on-click

As a quick fix, you can use localStorage

this.clicked = localStorage.getItem('clickedVerificationMail') !== null;
if (! this.clicked) {
    localStorage.setItem('clickedVerificationMail', true);
    this.clicked = true;
}

As a general rule, everything that you really want to enforce or security related belongs on your server. Javascript is easily changeable by a user.

Angular: Trying to disable button after amount of clicks

I created a code demo for you that disables the button after 5 click: link to the demo

Please feel free to adapt the code according to your needs.

Disable button once added to cart - Angular 11

You will need some way to keep track of a list of product ids instead of just the most recent, which is what your code currently does.

One suggestion is to change itemExists into an array and use it to hold all of the ids that have been added.

itemExists: number[] = [];

btnAddToCart(product: ProductList) {
  this.cartService.addToCart(product);
    if (product.Id && !itemExists.includes(product.id)) {
        this.itemExists.push(product.Id);
    }
}

Your buttons can the determine their state with a small logic change that checks to see if the array includes the current product.id.

<button class="btn btn-outline-danger btn-sm mt-2" type="button"
    (click)="btnAddToCart(prod)" [disabled]="itemExists.includes(prod.Id)">Add To Cart
</button>

Remember that if you remove any item from the cart, the id must be removed from the array - if that makes sense for your app.

Angular4: Disable button in ngFor after click

Code from head (can have bugs):

In your .ts component use array:

buttons = Array(10).fill(false); // e.g. 10 = size of items

In your template:

<div class="card" *ngFor="let i of items; index as j">
    <button type="button" [disabled]="buttons[j]" (click)="buttons[j]=true">TEST</button>
<div>

The index as j works on Angular 5/6, for lower version use let j=index

Alternative solution

Add to items field disabled and use that field directly:

<button type="button" [disabled]="item.disabled" (click)="item.disabled=true">TEST</button>

---

Related Topics