CODEWITHSUNDEEP
angularjs
Saani
Saani

Reputation: 782

Angular 1.4: Disable button after click

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?

Upvotes: 0

Views: 87

Answers (1)

Hien Nguyen
Hien Nguyen

Reputation: 18973

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);

Upvotes: 0

Related Questions