Angular, to many API calls on input 'on-change'

Question

I am using angular 8.

There is one auto-complete input and if it's value changes I have to make API call and load new suggestions for this input.

  //In Template

  <autocomplate [suggestions]="suggestions" (filterChange)="filterChange($event)"></autocomplate>



  //In Component

  filterChange(e) {
    console.log(e)
    this.loadSubscriptions(e ? { 'filterItem.name': e  } : {})
  }

  loadSubscriptions(params) {
     if (this.suggestionsSubscriber) this.suggestionsSubscriber.unsubscribe()
     this.suggestionsSubscriber = this.suggestionsService.loadData(params).subscribe(
        data => this.suggestions = data
     })
  }

Everything works fine, but the problem is when user types fast application makes to many requests.

Can I somehow delay requests if user types fast? for example, while the user is typing don't make API calls on every change, and if the user stops typing then make API call.

Or if you have a better way to solve this problem, please share.

https://www.learnrxjs.io/operators/filtering/throttletime.html — Roberto Zvjerković, Jul 24 '19 at 12:02
https://www.learnrxjs.io/operators/filtering/debouncetime.html — Roberto Zvjerković, Jul 24 '19 at 12:02
You can implement like when user stop typing It will call API, Refer this http://blog.sodhanalibrary.com/2016/10/trigger-event-when-user-finishes-typing.html#.XThI2egzaUk — hrdkisback, Jul 24 '19 at 12:04

score 3 · Answer 1 · answered Jul 24 '19 at 12:44

Use RXJS denounceTime operator. Simply chain it to your Observable.

Whenever debounceTime receives an event, it waits a designated amount of time to see if another event comes down the pipe. If it does, it restarts its timer. When enough time has passed without another event streaming in, it emits the latest event.

score 2 · Answer 2 · edited Jul 24 '19 at 12:38

2

I would suggest you to use throttle or debounce. You can write your own implementation for those or use library such as lodash.

Debounce using latest Rxjs can be a work around. Please see below for implementation.

Angular and debounce

edited Jul 24 '19 at 12:38

Harshad Vekariya

972
1
7
28

answered Jul 24 '19 at 12:22

Hayk Aghabekyan

1,087
10
19

1

There was an addition to my answer that it can be handled with RXjs operators as well and I completely agree with @Harshad Vekariya – Hayk Aghabekyan Jul 24 '19 at 12:39

score 1 · Answer 3 · answered Jul 24 '19 at 12:33

1

I also had a same problem, so i put my code inside setTimeout as below

  filterChange(e) {
    console.log(e)
    setTimeout(()=>{
      this.loadSubscriptions(e ? { 'filterItem.name': e  } : {})
    },2000);
  }

Now if you type very fast then it will not call the loadSubscriptions at that time. it will call after 2 sec. You can configure the time according to your choice. I hope This will helps you.

answered Jul 24 '19 at 12:33

Varun verma

189
4
19

That's not real solution by angular way but it can be hack. :) – Harshad Vekariya Jul 24 '19 at 12:35
Yes it is. i used it our react application and its working so well :) – Varun verma Jul 24 '19 at 12:39
1

It will surely works. No offense, but angular have better way to handle. – Harshad Vekariya Jul 24 '19 at 12:40
1

def works as a hack, but the right solution would be to use debounceTime() which is the rxjs way. – Pari Baker Jul 24 '19 at 13:16

Angular, to many API calls on input 'on-change'

3 Answers3