Angular 5 - stop sending multiple request

Question

I need to stop sending multiple requests, when user clicks many times on the form submit button. So the user can't send next request until the first response is receiving. In the meanwhile he can see the spinner animation instead of this button. When response is receiving, he can click and submit again.

Not sure how to start. The button has own component, and I would like to modify the code in one place. Not sure if I need to use interceptors, directives, or what? What do you think?

Change the [disabled] property from the button.

Christian Benseler
– Christian Benseler

2018-01-11 11:36:02 +00:00
Commented Jan 11, 2018 at 11:36 — Christian Benseler
– Christian Benseler, Commented Jan 11, 2018 at 11:36

Yakov Fain · Accepted Answer · 2018-01-11 14:21:18Z

3

In the component's class create a boolean variable isBusy and set it to true in the onSubmit() method. When the result (or an error) comes back, set it back to false.

Bind the isBusy var to disabled property of the Submit button:

<button type="submit" [disabled]="isBusy">Submit</button>

answered Jan 11, 2018 at 14:21

Yakov Fain

12.4k5 gold badges35 silver badges40 bronze badges

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

Comments

Vicky · Accepted Answer · 2018-01-11 11:56:34Z

1

You can use the below mentioned package to manage the loader on a http request.

https://www.npmjs.com/package/angular2-busy

Hope this helps

answered Jan 11, 2018 at 11:56

Vicky

2,0782 gold badges13 silver badges20 bronze badges

Collectives™ on Stack Overflow

Angular 5 - stop sending multiple request

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related