How to prevent http call in Angular 2 when using observables?

Question

Several examples demonstrate how to use observables to hook up a control to show data fetched from a http backend, such as this one: http://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html

Can you prevent that http call in certain situations? For example in the mentioned post there is an autocomplete field - is there a way to prevent the http call in case the user clears the field?

I have tried modifying the switchMap function with for example:

if(term.length < 1) {
   return Observable.empty();
}
else { // call the http service...

and it does prevent the call, but leaves the previous results at the control.

You are close. Observable.empty creates and Observable that never fires. You need one that fires with an empty array to clear the list. — Christoph
– Christoph, Commented Jan 14, 2016 at 0:00

Christoph · Accepted Answer · 2016-01-13 23:49:32Z

4

Sorry, I'm on mobile but something like filter(term => term.length > 0) should do the trick.

UPDATE after comment

There are probably more elegant ways of handling this but how about this?

this.items = this.term.valueChanges
             .debounceTime(400)
             .distinctUntilChanged()
             .switchMap(term => term.length > 0 
               ? this.wikipediaService.search(term) 
               : Observable.of([]));

Working plunkr: http://plnkr.co/edit/3p9eqiPAcqjBIEdLNkUG?p=preview

edited Jan 13, 2016 at 23:49

answered Jan 8, 2016 at 11:58

Christoph

28.5k33 gold badges104 silver badges136 bronze badges

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

2 Comments

wannabeartist Over a year ago

This does prevent the call, but it doesn't erase the existing list.

Harley Alexander Over a year ago

awesome solution! say I need a full function instead of one line =>, how do I return the original observable to be subscribed to? see: dropbox.com/s/pvt03jo6ndsw30u/…

Collectives™ on Stack Overflow

How to prevent http call in Angular 2 when using observables?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related