0

Am currently working on angular 2 web application. Actually whenever i'm double click the submit button.Action takes place two time. So I want to implement the Jquery .on() .of() method.

I know the logic. We can disable/enable the button with the flag while click the submit button. 

clickFunction()
{
isdisabled=false;// disable button
if(isclicked)
//service call back  & clear the inputs
isdisabled = true;//enable button
}

But I don't want do it manually. So any idea about to use the way of jQuery .on() and .off() in angular 2??

Arun Kumaresh
  • 6,211
  • 6
  • 32
  • 50
Ramesh Rajendran
  • 37,412
  • 45
  • 153
  • 234
  • https://stackoverflow.com/questions/30623825/how-to-use-jquery-with-angular2 Please refer this, you might get some idea. – Sudha Velan Jun 21 '17 at 10:48
  • I don't like to use Jquery code. I want to know if possible to use the exact event of Jqery on() and off() in angular 2 – Ramesh Rajendran Jun 21 '17 at 10:49
  • This will lead you to some conclusion without jquery https://stackoverflow.com/questions/37121134/how-to-deal-with-double-submit-in-angular2 – Sovan Misra Jun 21 '17 at 10:52
  • What is it that you actually want? You say "I don't want to do it manually", what does that mean? You are looking for some module that do it for you? – Marcus Lind Jun 21 '17 at 10:58
  • I think the problem here is that Angular is a much more asynchronous model than jQuery, so simply disabling a button while you are processing the click is probably not going to be sufficient in most cases as you will want to kick off some event emitter or something and wait until that has completed before you re-enable the button. Perhaps using `Rx.Observable.debounce()` would help you: instead of disabling the button during the event just ignore any duplicate clicks that come too soon after? – Duncan Jun 21 '17 at 11:37

4 Answers4

0

I'm not sure what you mean by "You don't want to do it manually". Perhaps you're looking for the [disabled] attribute that you can attach to your HTML button with a condition.

Also, note that we disable the button when our service return the response. If you put it outside the subscribe() method then it might enable the button too quickly.

HTML

<button (click)="doAction()" [disabled]="disabled">Click</button>

JS

doAction() {
    disabled = true;
    this.myService.doServiceAction()
        .subscribe(result => {
            disabled = false
        })
}
Marcus Lind
  • 10,374
  • 7
  • 58
  • 112
0

May be you can try this for on/off (enabling/disabling) button.

(<HTMLInputElement>document.getElementById("buttonId")).disabled = !(<HTMLInputElement>document.getElementById("buttonId")).disabled;
SubbU
  • 349
  • 3
  • 6
  • Actually am forget `document.getElementById` the. Am working with angular 2 . not javascript – Ramesh Rajendran Jun 21 '17 at 11:20
  • you can use the `getElementById` in angular 2 (typescript) too. additionally, you have to cast it to `HTMLInputElement` to access its native properties and that is what i did.. – SubbU Jun 21 '17 at 11:22
  • But why I need it? angular is support for two way binding. then why I need implement this? I have a pure idea about it which am explain in my question. but I want to switch off/on the click event – Ramesh Rajendran Jun 21 '17 at 11:25
  • What exactly is your question about implementation of the switch property in jQuery? As I see it, do you want to use only jQuery for this problem? – Sriram Jayaraman Jun 21 '17 at 11:32
-1

You can you RxJs with angular2 or 4. Please checkout eventsubscriber. 

var source = Rx.Observable.fromEvent(document, 'mousemove');

var subscription = source.subscribe(function (e) {
  result.innerHTML = e.clientX + ', ' + e.clientY;
});
Mohammad Mahmudul Hasan
  • 189
  • 2
  • 12
-2

Using ng-disabled should work for your need. Usually it takes less than 1-2 milliseconds for $eval and $apply methods to execute.

Edited:

Use some thing like this to emit an event. 

<button ng-click="clicked()">button<>

In controller: 

$scope.clicked() = function() {
   $scope.emit('clicked-once');
}



 $scope.on('clicked-once', function(event) {
  // do something here 
 })

Keep a track of clicks with flag.

Sudhesh Rajan
  • 367
  • 1
  • 7