Manage your observable subscriptions in Angular with help of rx.js

When subscribing to observables it’s key to manage your subscriptions. An observable execution can run for an infinite amount of time and therefore we need a way to stop it from executing. If we keep our subscriptions open to resources that are not required we’re losing unnecessary memory and computing resources and that is bad. We can of course just call unsubscribe() but there are much better and easier ways to stop your subscription from receiving data with the power of rx.js.

If you’re not sure that you completely understand observables yet, I recommend to read my previous article.

Photo by Grant Ritchie on Unsplash

Using operators from rx.js enables us to make observables complete without calling unsubscribe(). Using those methods instead of calling unsubscribe() always has preference as we have much more control over our subscriptions this way.

For each rx.js operator i will include images of rxmarbles.com. Please note that the top arrow represents the original observable that emits multiple values. Each circle stands for one emit. The bottom arrow represents the effect the operator has on the data stream before it completes. if you haven’t checked out rxmarbles yet, i highly recommend you to look at it soon. It can really help you with understanding how each rx.js operator work.

.first()

If you are sure that you only need the first value or the first value that passes a test, use the first(). The observable emits only the first value and then completes.

http://rxmarbles.com/#first

**Example usage**You can use first when you just want to get the value from an api-request. Since you know you only need one value, first works great for that.

.take()

If you know beforehand that you only want a maximum number of values from your source you can use the take. take returns an observable that emits it’s values a maximum amount of times.

http://rxmarbles.com/#take

**Example usage**You can use take when you for example know that the first value can be null but the second has the value you need. I use this sometimes when selecting data from my ngrx/store. It can happen that the store is still empty when you ask for the data, the first value will then be null. A little later the store might be filled and my subscription now receives the data it needs. take(2) then works fine.

.elementAt()

Where take accepts a maximum number of emits from the observable. elementAt accepts only the emit from a given index. In other words, use elementAt if you for example only want the third value from an observable. elementAt then waits for the third value and then completes.

http://rxmarbles.com/#elementAt

**Example usage**Maybe there’s a scenario where you’re making something interactive and need to do something once with the third click.

.takeUntil()

This one is a bit more difficult as takeUntil requires two observables. takeUntil emits values until a the second observable emits ‘something’ or completes. The first observable, e.g. the original source, then completes.

http://rxmarbles.com/#takeUntil

**Example usage**Let’s say you’re listening to a websocket on a specific page. You of course only want to keep a subscription to this websocket open when you’re on the page. You can use takeUntil to automatically unsubscribe on routeChange.

.takeWhile()

You can see takeWhile as a filter. Each value that the observable emits is given to the takeWhile. This then tests the value for a certain condition and returns a boolean. If it returns false, the observable completes.

http://rxmarbles.com/#takeWhile

**Example usage**The example i gave on when to use take about selecting data from my ngrx/store that might or might not be present yet can also be done with takeWhile.

Conclusion

While the examples are somewhat fictional, this small overview of first, take, elementAt, takeWhile and takeUntil should give you a better understanding of how you can manage your subscriptions without using unsubscribe.

Looking for a job in Amsterdam?

I work for Sytac as a Senior front-end developer and we are looking for medior/senior developers that specialise in Angular, React, Java or Scala. Sytac is a very ambitious consultancy company in the Netherlands that works for a lot of renowned companies in banking, airline, government and retail sectors. You can think of companies like ING, KLM, Deloitte, Ahold Delhaize, ABN AMRO, Flora holland and many more.

From a personal opinion Sytac really sets itself apart with their client portfolio, but also with how they take care of their employees. They do really care about the wellbeing of their employees. Apart from a good salary (50K-75k), you will notice this in regular meetings with the consultant managers but also by the amount of events they organise and all the other perks they offer to keep all employees happy.

If you think you have what it takes to work with the best, send me an email on [email protected] and i’m happy to tell you more..