Angular Observable destroy with takeUntil: What happens when .next() is missing in ngOnDestroy

Question

In an Angular 7 Component, I use the RxJS takeUntil() to properly unsubscribe on observable subscriptions.

What happens when the this.destroy$.next() is missing in the method ngOnDestroy (see sample below)? Will it still unsubscribe properly?
What happens when the this.destroy$.complete() is missing in the method ngOnDestroy (see sample below)? Will it still unsubscribe properly?
Is there any way to enforce that pattern with takeUntil() to unsubscribe is properly used (e.g. tslint rule, npm package)?


@Component({
    selector: 'app-flights',
    templateUrl: './flights.component.html'
})
export class FlightsComponent implements OnDestroy, OnInit {
    private readonly destroy$ = new Subject();

    public flights: FlightModel[];

    constructor(private readonly flightService: FlightService) { }

    ngOnInit() {
        this.flightService.getAll()
            .pipe(takeUntil(this.destroy$))
            .subscribe(flights => this.flights = flights);
    }

    ngOnDestroy() {
        this.destroy$.next();
        this.destroy$.complete();
    }
}

https://stackoverflow.com/questions/35850409/rxjs-subject-next-after-complete — Anto Antony, Oct 17 '19 at 07:06

score 2 · Accepted Answer · edited Jun 30 '20 at 17:18

takeUntil takes next as emission. If only complete() called it won't unsubscribe

try this out:

const a=new Subject();
interval(1000).pipe(takeUntil(a)).subscribe(console.log);
timer(3000).subscribe(_=>a.complete())

this.destroy$ is still in the memory and won't get garbage collected
Not that i am aware of

Please also take a look here to avoid memory leak when using takeUntil.

https://medium.com/angular-in-depth/rxjs-avoiding-takeuntil-leaks-fb5182d047ef

Personally I prefer explicit unsubscribe upon destroy.

score 1 · Answer 2 · answered Mar 11 '20 at 18:42

1

Here's a simpler approach:

private readonly destroy$ = new Subject<boolean>();

...

ngOnDestroy() {
    this.destroy$.next(true);
    this.destroy$.unsubscribe();
}

answered Mar 11 '20 at 18:42

Paul Story

574
4
10

1

You may not need the type declaration on the Subject – Paul Story Mar 11 '20 at 18:44

score 0 · Answer 3 · answered Oct 17 '19 at 07:12

0

this.destroy$.next() triggers the Subject which triggers the takeUntil operator which completes the flightService.getAll() subscription.

this.destroy$.complete() completes the destroy$ Subject when component is destroyed.

answered Oct 17 '19 at 07:12

noririco

723
6
15

score 0 · Answer 4 · answered Oct 17 '19 at 07:23

Hi use takeWhile instead of takeUntil.

@Component({
    selector: 'app-flights',
    templateUrl: './flights.component.html'
})
export class FlightsComponent implements OnDestroy, OnInit {
    private readonly destroy$ = new Subject();
    alive = true;
    public flights: FlightModel[];

    constructor(private readonly flightService: FlightService) { }

    ngOnInit() {
        this.flightService.getAll()
            .pipe(takeWhile(() => this.alive))
            .subscribe(flights => this.flights = flights);
    }

    ngOnDestroy() {
        this.alive = false;
        this.destroy$.complete();
    }
}

Angular Observable destroy with takeUntil: What happens when .next() is missing in ngOnDestroy

4 Answers4