cass.si 🪴 🇳🇴

managing ng subscriptions

Sun May 16 2021 11:48:00 GMT+0000 (Coordinated Universal Time)

it's commonly taught to newbies that cleaning up your subscriptions is necessary to avoid memory leaks in your angular app, so here's a couple ways to do that without too much hassle:

1, single subscription

private _subscription:Subscription;

ngOnInit() {
this._subscription = of([]).subscribe(v => {});
}

ngOnDestroy() {
this._subscription.unsubscribe();
}

is fine for a single subscription, but i don't like how its coupled

2, many subscriptions

private _subscriptions:Subscription[] = [];
public value:Observable<any> = of([]);

ngOnInit() {
this._subscriptions.push(this.value.subscribe(v => {}));
this._subscriptions.push(this.value.subscribe(v => {}));
}

ngOnDestroy() {
this._subscriptions.forEach(s => s.unsubscribe());
}

bad, not a fan, .push -- ew

3, the good way

here we invert the control & tell all the subscriptions to stop through emitting an event
this is my favorite method :)

private _unsubscribe = new Subject<void>();
public value:Observable<any> = of([]);

ngOnInit() {
this.value.pipe(takeUntil(this._unsubscribe).subscribe(v => {}); // once _unsubscribe is applied, stop the listener
this.value.pipe(takeUntil(this._unsubscribe).subscribe(v => {});
}

ngOnDestroy() {
this._unsubscribe.next();
this._unsubscribe.complete();
}