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.

You can implement like when user stop typing It will call API, Refer this blog.sodhanalibrary.com/2016/10/… — hrdkisback
– hrdkisback, Commented Jul 24, 2019 at 12:04

Omri L · Accepted Answer · 2019-07-24 12:44:53Z

3

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.

answered Jul 24, 2019 at 12:44

Omri L

7694 silver badges12 bronze badges

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

Comments

Harshad Vekariya · Accepted Answer · 2019-07-24 12:38:47Z

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, 2019 at 12:38

Harshad Vekariya

1,0621 gold badge9 silver badges28 bronze badges

answered Jul 24, 2019 at 12:22

Hayk Aghabekyan

1,08710 silver badges19 bronze badges

1 Comment

Hayk Aghabekyan Over a year ago

There was an addition to my answer that it can be handled with RXjs operators as well and I completely agree with @Harshad Vekariya

Varun verma · Accepted Answer · 2019-07-24 12:33:55Z

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, 2019 at 12:33

Varun verma

1894 silver badges20 bronze badges

4 Comments

Harshad Vekariya Over a year ago

That's not real solution by angular way but it can be hack. :)

Varun verma Over a year ago

Yes it is. i used it our react application and its working so well :)

Harshad Vekariya Over a year ago

It will surely works. No offense, but angular have better way to handle.

Pari Baker Over a year ago

def works as a hack, but the right solution would be to use debounceTime() which is the rxjs way.

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related