How to disable button after (click) in Angular

angular 4 disable click event
angularjs disable button from controller
angular 7 disable button
angular disable button
disable button after click ionic 3
angular disable all buttons
angular directive disable button
disable button until dropdown selected angularjs

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>

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?, ] attribute, if it the currentLesson is not the same as it's order. Angular disable button On Click – Sometimes we need to disable buttons,links on click event. It is very simple to disable a button in AngularJs. You can use ng-disabled to disable the button, link in AngularJs.

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

Enable/disable buttons with Angular, or vice versa. It is usually applied on form field (input, select, button, etc). However, when a user clicks the submit button, it calls the save() function and here I have set the value as true. This will disable the button and prevent it from being clicked again, until you explicitly set the value as false to enable it. Try it Yourself. That's it.

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) {
    ($ 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.

AngularJS, Disable button after single click with AngularJS ng-disabled Directive. You can in-fact do a whole lot of things with this directive. I have a button with type submit. All you have to do is assign a Boolean true or false to it. When the page first loads, the button remains enabled. ← PreviousNext → I've looked all over the web including several stack overflow examples for a solution to the question. To be specific, I tried this: var disableButton = function() { document.getElementByI

A template reference approach:

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


Disable button after single click with AngularJS ng-disabled Directive, I have written an Angular Directive that disables a button after it has been For example: the button-click triggers a form submit, but the server-side validation fails. But remember, the Angular code might run at other places as well(like in class DisableAfterClickDirective { @Input('appDisableAfterClick')  This EventEmitter is passed on to the button's Directive. This Directive then subscribes to it. Whenever the host wants to instruct the button to re-enable, is emits an event. The Directive will take care of enabling the button. As an alternative, one could use the disabled property of the button to control its state. However, I would like to reserve that property for other logic that is part of the host Component (e.g. are all required fields correctly filled, etc.).

Angular directive to disable a button when clicked, allowing re , Here Mudassar Ahmed Khan has explained with an example, how to disable Button after Click using AngularJS. This article will illustrate how  In this list it should only be available to click the button when the currentLesson has the value of the number of the lesson: Button of lesson 1 is active when : currentLesson = 1. Button of lesson 2 is active when : currentLesson = 2. Etc. etc. So if currentLesson = 2, the buttons of lesson 1, 3, 4, 5 and 6 should be disabled.

Disable Button after Click using AngularJS, Also, each button has a click attribute. In each case, clicking the button updates the value of the buttonDisabled property. Important note: these two buttons are for​  This article will illustrate how to disable Button after Click using the ng-disabled directive in AngularJS. Disable Button after Click using AngularJS. The below HTML Markup consists of an HTML DIV to which ng-app and ng-controller AngularJS directives have been assigned.

How do I disable an HTML element with Angular ?, Toggle light/dark theme. Toggle Zen Mode. Project. Download Project. Info. Starter project for Angular apps that exports to the Angular CLI. 3.6k. 17. Files. src​. Disable a button after click Angular example This Angular example shows how to disable a button after it is clicked. To do that disabled property of the button is bound to a boolean flag and that flag’s value is set by calling a function on the button click event.

  • I have form validations bound to the button ng-disabled="!validObject" But even if the validation passes after first click, I need to disable the button, how can I do this?
  • But if I need to use it in more places then its get pretty unhandy? One bool for different buttons or one bool for a component? And whats about booleans across components?
  • @liqSTAR - To reuse this kind of button, make it a component and define the flag in that component.