How to disable button after (click) in Angular

A template reference approach:

    <button (click)="submit();submitButton.disabled = true" #submitButton>submit</button>

StackBlitz

TypeScript implementation

If you're using Angular, you're probably using TypeScript. Here's the TypeScript implementation (inspired by @DanielWilliams' js implementation):

Component html

<button type="button" class="btn btn-primary" (click)="actionMethod($event)">Give Kitchen access</button>

Component ts

actionMethod($event: MouseEvent) {
    ($event.target as HTMLButtonElement).disabled = true;
    // Do actions.
}

This, IMO, is the superior solution because you don't have to keep booleans around in your Component ts files and you get TypeScript's types.

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.

<button type="button" class="btn btn-primary" (click)="actionMethod($event)">Give Kitchen access</button>

actionMethod(event: any) {
    event.target.disabled = true;
}

Related