How to disable button after (click) in Angular

Issue

I am new at Angular, and I would like to know how to disable a button after I click that same button and performed the action correspondent

This is my button html code

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

Solution

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.

Answered By - ConnorsFan