Angular 6 Prevent memory leaks multiple Observable in a component using takeUntil

Question

I am following 2nd example from this site: https://www.agiratech.com/how-to-prevent-memory-leaks-in-angular-observables/

I would like to know if I have multiple Observables in a component, do I need to create that many references to the Subject object. I have used unsubscribe and unsubscribe1 variables. Should I be re-using unsubscribe in different methods, or create new Subject instance for each time I subscribe? Code did not throw error in either case.

Here is my code:

import { Component, OnDestroy, OnInit } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { ProjDetailsService } from '../../services/proj-details.service';


@Component({
    selector: 'app-proj-details',
    templateUrl: './proj-details.component.html',
    styleUrls: ['./proj-details.component.scss']
})
export class ProjDetailsComponent implements OnInit {
    private unsubscribe = new Subject();
    private unsubscribe1 = new Subject();//is this required?

    constructor(public _projDetailsService: ProjDetailsService
    ) {

    }
    ngOnInit() {
        this.LoadApprovalManager();
        this.LoadActiveProjectSubmissions();

    }
    public LoadApprovalManager() {


        this._projDetailsService.GetDefaultMgrGeidData()
            .pipe(takeUntil(this.unsubscribe))
            .subscribe(result => {

            }, error => {
                //this.ErrorMessage('Unable to load search data ' + error.toString());
                //this.SelectedApproverManager = '';
            });

    }

    LoadActiveProjectSubmissions() {
        this._projDetailsService.GetActiveProjectSubmissions()
            .pipe(takeUntil(this.unsubscribe1))
            .subscribe(x => {
                //processing
            }, error => {
               // this.ErrorMessage(error.toString());
            });

    }

    ngOnDestroy() {
        this.unsubscribe.next();
        this.unsubscribe.complete();

        this.unsubscribe1.next();
        this.unsubscribe1.complete();

    }
}

Answer 1

following that example, the answer is no. You would use the same unsubscribe signal for all observables like this:

export class ProjDetailsComponent implements OnInit {
    private unsubscribe = new Subject();

    constructor(public _projDetailsService: ProjDetailsService
    ) {

    }
    ngOnInit() {
        this.LoadApprovalManager();
        this.LoadActiveProjectSubmissions();

    }
    public LoadApprovalManager() {


        this._projDetailsService.GetDefaultMgrGeidData()
            .pipe(takeUntil(this.unsubscribe))
            .subscribe(result => {

            }, error => {
                //this.ErrorMessage('Unable to load search data ' + error.toString());
                //this.SelectedApproverManager = '';
            });

    }

    LoadActiveProjectSubmissions() {
        this._projDetailsService.GetActiveProjectSubmissions()
            .pipe(takeUntil(this.unsubscribe))
            .subscribe(x => {
                //processing
            }, error => {
               // this.ErrorMessage(error.toString());
            });

    }

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

However, all due respect to the folks at that site, I think this method makes no sense whatsoever and increases boiler plate code to absurd levels when you could just do this:

export class ProjDetailsComponent implements OnInit {
    private subs: Subscription[] = [];

    constructor(public _projDetailsService: ProjDetailsService
    ) {

    }
    ngOnInit() {
        this.LoadApprovalManager();
        this.LoadActiveProjectSubmissions();

    }
    public LoadApprovalManager() {


        this.subs.push(this._projDetailsService.GetDefaultMgrGeidData()
            .subscribe(result => {

            }, error => {
                //this.ErrorMessage('Unable to load search data ' + error.toString());
                //this.SelectedApproverManager = '';
            }));

    }

    LoadActiveProjectSubmissions() {
        this.subs.push(this._projDetailsService.GetActiveProjectSubmissions()
            .subscribe(x => {
                //processing
            }, error => {
               // this.ErrorMessage(error.toString());
            }));

    }

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

    }
}

simple uniform approach to subscription management that doesn't pollute your observables with extra steps in the pipe.