Angular 1.4: Disable button after click

Question

I have a situation where I want to disable the button for a few seconds when clicked. Here is the code for button:

<button uib-popover="Create TO" popover-trigger="mouseenter" data-ng-click="createTransportOrder(item.confirmed_price_id)" data-ng-disabled="item.transport_order_id || !item.confirmed_price_id" class="btn btn-info btn-xs">
                            <i class="fa fa-truck"></i>
                        </button>

And here is the createTransportOrder method:

$scope.createTransportOrder = function (priceResponseId) {
            var priceResponseIds = [priceResponseId];
            PriceRequestsModel.createTransportOrdersByIds(priceResponseIds).then(
                function (response) {
                    $scope.messages = response.messages;
                    updateSelectedPriceRequests();
                    getPriceRequests();
                },
                function (response) {
                    $scope.messages = response.messages;
                }
            )
        };

I have tried a couple of things but in vain. How can I do this?

for how much time you want it disabled?

Atul Rajput
– Atul Rajput

2020-04-21 11:43:30 +00:00
Commented Apr 21, 2020 at 11:43 — Atul Rajput
– Atul Rajput, Commented Apr 21, 2020 at 11:43
for just three seconds

Saani
– Saani

2020-04-21 11:44:21 +00:00
Commented Apr 21, 2020 at 11:44 — Saani
– Saani, Commented Apr 21, 2020 at 11:44

Hien Nguyen · Accepted Answer · 2020-04-21 12:11:30Z

0

You can add setTimeout at the end of createTransportOrder

 this.button.nativeElement.disabled = true;
    setTimeout(function(){
      this.button.nativeElement.disabled = false;
    },5000);

Add #mybutton to your button <button (click)="yourclick()" #mybutton>Your button</button>

add variable @ViewChild('mybutton') button; to your component

Stackbliz demo code: https://stackblitz.com/edit/angular-disable-5second

With angular 1.4 you can change to

Set an id to your button as <button id="mybutton">

Add these code to below of click function.

document.getElementById('mybutton').disabled = true;
    setTimeout(function(){
      document.getElementById('mybutton').disabled = false;
    },5000);

edited Apr 21, 2020 at 12:11

answered Apr 21, 2020 at 11:45

Hien Nguyen

19k7 gold badges57 silver badges70 bronze badges

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

2 Comments

Saani Over a year ago

thanks for the answer. My angular version is 1.4 and the answer you gave probably isn't for my version. I have updated the heading of the question.

Saani Over a year ago

This works fine but my problem is that I have to list data where every row contains that one button I want to disable after click. So id wont work. Neither would class as it'll pick the first occurrence of the button. is there anyway I can get the current button in the createTransportOrder method?

Collectives™ on Stack Overflow

Angular 1.4: Disable button after click

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related