How to unsubscribe immediately after the the condition is met in RxJs

Question

I am new to the RxJs observables and I am finding difficulty in unsubscribing the loop once the criteria are met, can you please help me

In the below function if anytime the code reaches the if block I wanted to unsubscribe the Observables

Before asking this questions I have gone through below questions and none of them helped me much

Javascript Function

this.router.events.subscribe((url: any) => {
    url = this.router.url;
    if ((url === "/profile" || url === "/summary") && this.filterConfigFlag === false) {

        /*
        Perform operations
        */

    } else {
        console.log(typeof (url), url);

    }
});

So you want to run the `next` handler and complete the Observable right after that? — martin, Jul 05 '18 at 17:13
What do you mean by "go ahead". Continue receiving more items or complete? — martin, Jul 05 '18 at 17:15

martin · Accepted Answer · 2019-09-25T08:03:48.007

18

You probably want takeWhile:

this.router.events
  .pipe(
    takeWhile(url => url === ...), // when the condition isn't met it'll complete immediately
  )
  .subscribe(...);

but if you want to include also the last value (the value that completed the Observable) you'll need to do something like this:

Before RxJS 6.4

this.router.events
  .pipe(
    concatMap(url => url === ... ? of(url, null) : of(url)),
    takeWhile(Boolean),
  )
  .subscribe(...);

Since RxJS 6.4

RxJS 6.4 added an overload to takeWhile, it is now possible to include the last value like this:

this.router.events
  .pipe(
    takeWhile(url => url === ..., true),
  )
  .subscribe(...);

edited Sep 25 '19 at 08:03

answered Jul 05 '18 at 17:26

martin

93,354
25
191
226

Here is the docs link for further reference: http://reactivex.io/documentation/operators/takewhile.html – J. Pichardo Jul 05 '18 at 17:28
It doesn't work, subscription never fired in my case. I tried the same code – Hope Sep 09 '20 at 02:15
takeWhile doesn't complete the observable, so it doesn't unsubscribe it – Donovant Jan 24 '23 at 10:19

score 2 · Answer 2 · answered Jul 05 '18 at 17:22

You may make use of a Subject and takeUntil operator as follows:

unsubscribe = new Subject<any>();

this.router.events.pipe(takeUntil(unsubscribe)).subscribe((url: any) => {
    url = this.router.url;
    if ((url === "/profile" || url === "/summary") && this.filterConfigFlag === false) {

        /*
        Perform operations
        */
this.unsubscribe.next();
    } else {
        console.log(typeof (url), url);
this.unsubscribe.next();
    }
});

How to unsubscribe immediately after the the condition is met in RxJs

2 Answers2

Before RxJS 6.4

Since RxJS 6.4