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 but there are much better and easier ways to stop your subscription from receiving data with the power of rx.js. unsubscribe() If you’re not sure that you completely understand observables yet, I recommend to read my . previous article Photo by on Grant Ritchie Unsplash Using operators from rx.js enables us to make observables complete without calling . Using those methods instead of calling always has preference as we have much more control over our subscriptions this way. unsubscribe() unsubscribe() 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 . The observable emits only the first value and then completes. first() http://rxmarbles.com/#first **Example usage**You can use when you just want to get the value from an api-request. Since you know you only need one value, works great for that. first first .take() If you know beforehand that you only want a maximum number of values from your source you can use the . returns an observable that emits it’s values a maximum amount of times. take take http://rxmarbles.com/#take **Example usage**You can use 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. then works fine. take take(2) .elementAt() Where accepts a maximum number of emits from the observable. accepts only the emit from a given index. In other words, use if you for example only want the third value from an observable. then waits for the third value and then completes. take elementAt elementAt elementAt 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 requires two observables. emits values until a the second observable emits ‘something’ or completes. The first observable, e.g. the original source, then completes. takeUntil takeUntil 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 to automatically unsubscribe on routeChange. takeUntil .takeWhile() You can see as a filter. Each value that the observable emits is given to the . This then tests the value for a certain condition and returns a boolean. If it returns false, the observable completes. takeWhile takeWhile http://rxmarbles.com/#takeWhile **Example usage**The example i gave on when to use about selecting data from my ngrx/store that might or might not be present yet can also be done with . take takeWhile Conclusion While the examples are somewhat fictional, this small overview of , , , and should give you a better understanding of how you can manage your subscriptions without using unsubscribe. first take elementAt takeWhile takeUntil Looking for a job in Amsterdam? I work for as a Senior front-end and we are looking for medior/senior developers that specialise in , 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. Sytac developer Angular 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 and i’m happy to tell you more.. luuk.gruijs@sytac.io