Destroying a merge() operator subscription?

Question

In this article a the merge operator is being used to subscribe to both sort and paging events. The function looks like this:

    merge(this.sort.sortChange, this.paginator.page)
        .pipe(
            tap(() => this.loadLessonsPage())
        )
        .subscribe();

Do we need to hold on on to the subscription and call unsubscribe when the component is destroyed?

https://github.com/NetanelBasal/ngx-take-until-destroy – martin Jul 30 '19 at 15:39 — martin, Jul 30 '19 at 15:39

Bjorn 'Bjeaurn' S · Accepted Answer · 2019-07-30T15:36:31.420

1

Short answer: Yes!

More expanded answer: You don't have to do it manually!

You can use plenty of operators to help you manage the subscription. An even better way to not manage the subscription at all is to let your HTML do it for you using the AsyncPipe.

Example:

component

this.sortAndPaging = merge(this.sort.sortChange, this.paginator.page)
        .pipe(
            tap(() => this.loadLessonsPage())
        )

html

<div *ngIf="sortAndPaging | async as sortAndPaginaData">
 {{ sortAndPagingData | json }}
</div>

This way, Angular's lifecycle management in combination with the AsyncPipe will keep track and subscribe/unsubscribe from the subscription itself.

Another powerful solution, as I mentioned earlier, is using operators to do it. RxJS comes with plenty of powerful tools like first(), take(x), takeUntil() and takeWhile() that will complete and unsubscribe automatically for you.

take(10) will complete and unsubscribe after 10 values have passed through for example.

More specific tips for your situation will require a more expansive question and some examples of what you've tried.

edited Jul 30 '19 at 15:36

answered Jul 30 '19 at 15:33

Bjorn 'Bjeaurn' S

3,861
2
18
29

So is it automatically done somehow? – Ole Jul 30 '19 at 15:34
2

This should be a comment, mate :) – Mosè Raguzzini Jul 30 '19 at 15:34
I see this used a lot https://github.com/NetanelBasal/ngx-auto-unsubscribe – Ole Jul 30 '19 at 15:35
But I thought at a minimum we would need something like that and to implement `OnDestroy`? – Ole Jul 30 '19 at 15:35
Updated it Mosé as I was still typing :-). – Bjorn 'Bjeaurn' S Jul 30 '19 at 15:36
1

I would advise using the `takeUntil` approach (if you can't use the `async` pipe), and having a `Subject` which only emits in `ngOnDestroy`. This saves you from having a thousand subscription variables: `ngOnDestroy() { this.destroy$.next(true); }` – Will Alexander Jul 30 '19 at 15:40
I also prefer the `takeUntil()` approach, except for the fact that it usually comes with a `Subject`. But other then that, it's a very solid solution yes. – Bjorn 'Bjeaurn' S Jul 30 '19 at 15:41
Let me add, that just doing `this.destroy$.next()` is not enough. You need to complete the Subject too to trigger its teardown logic. `this.destroy$.next(); this.destroy$.complete(); this.destroy$.unsubscribe()` works best in my experience. – Bjorn 'Bjeaurn' S Jul 30 '19 at 15:42
Very cool - Thanks! – Ole Jul 30 '19 at 16:30

Destroying a merge() operator subscription?

1 Answers1