Skip to content

Aquent | DEV6

Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages

Angular 2: Observable Tips & Tricks

Written by: Tyler Padley

With Angular 2 adopting the RxJS Observable framework as standard for its HTTP implementation, this opens up a world of possibilities for developers. Still, the depth and breadth of the framework can be overwhelming to some who are just looking for simple solutions to common problems.

This article aims to demonstrate some of the more useful Observable operators and give examples of common situations where they would come in handy.

Retrying a Request

Retrying a request is fairly complicated using Promises, but Observables greatly simplify this process. However, the standard retry operator may not be ideal for most use cases as you typically want to delay the retry attempts to ensure a greater chance of success.

Enter retryWhen. retryWhen accepts a function as a parameter, passing the error and expecting an Observable returned. This allows you the flexibility to do things such as:

  • Add a delay by using delay()
Observable.retryWhen(error => error.delay(500))
  • Filter specific error messages
Observable.retryWhen((error) => { error.status == 429 ? return Observable.throw(error) : error.delay(500) });
  • Set a retry limit using take()
Observable.retryWhen((error) => error.delay(500).take(3))
  • Set a time limit using timeout()
Observable.retryWhen((error) => error.delay(500)).timeout(2000)

Any combination of the above operators can make for some more robust error handling and retry logic to improve your applications.

Subscription Management

Do you find yourself having to hold references to Observable Subscription objects in order to properly unsubscribe from them during clean up? The Observable operator takeWhile can provide a cleaner abstract to manage your subscriptions.

The takeWhile operator simply expects a method or Boolean condition and will continue receiving values emitted from the Observable until such a condition is false or the Observable fires its completion. Thus, a simple flag that you can switch on teardown could cause all active subscriptions to unsubscribe themselves without having to hold on to their references.

let active: boolean = true;

Observable.takeWhile(() => { return }).subscribe();
Observable.takeWhile(() => { return }).subscribe();

active = false;

TakeWhile can prove to be very useful in managing observable subscriptions, effectively enabling an observable on/off state.


While the operator cache has been deprecated in later versions of the RXJS Observable framework, there are still many cases where one would want to be able to store and re-emit observable data throughout the application without having to make the same request every time.

The cache operator was really just syntactic shorthand for the publishReplay and refCountoperators. Chaining the two together can still be used to effectively create a cache. The Observable will only make the outgoing request once, but will re-emit that result to any subscribers.


Other useful repetition operators include publishLast, and share, which is shorthand for the publish and refCount operations.

Data Dependencies

Observables are great for chaining together, which are useful when you have a request that depends on the results from a previous request. Operators such as switchMap and flatMapcan trigger a series of requests, using the results of the previous request. This can also be combined with the caching mechanisms above.


There are subtle differences between the two, but both operators will flatten the results of the first request while returning the results of the second request. Switch map will unsubscribe from the first request as soon as the second request starts emitting a value.

There are many, many more operators available in the RxJS Observable library, but these are just a few useful operators that may simplify some of your workflows.

Sign up for our Angular Course

Learn the most recent version and start building your own Angular apps

view course details