RxJs Angular Destroyed Unsubscribed OnDestroy

rxjs-unsubscribe.md

RxJs Unsubscribe

Given:

export class Example implements OnDestroy {
    isLoading : boolean;
    isSaving : boolean;
    isUndoing : boolean;
    isStarting : boolean;
    constructor(service : Service){
        this.service.isLoading$.subscribe(next => this.isLoading = next)
        this.service.isSaving$.subscribe(next => this.isSaving = next);
        this.service.isUndoing$.subscribe(next => this.isUndoing = next);
        this.service.isStarting$.subscribe(next => this.isStarting = next);
    }
    ngOnDestroy() {
        this.service.isLoading.unsubscribe();
        this.service.isSaving.unsubscribe();
        this.service.isUndoing.unsubscribe();
        this.service.isStarting.unsubscribe();
    }
}

Rather:

export class Example implements OnDestroy {
    isLoading : boolean;
    isSaving : boolean;
    isUndoing : boolean;
    isStarting : boolean;
    destroyed$ : ReplaySubject<boolean> = new ReplaySubject(1);
    constructor(service : Service){
        this.service.isLoading$.pipe(takeUntil(this.destroyed$)).subscribe(next => this.isLoading = next)
        this.service.isSaving$.pipe(takeUntil(this.destroyed$)).subscribe(next => this.isSaving = next);
        this.service.isUndoing$.pipe(takeUntil(this.destroyed$)).subscribe(next => this.isUndoing = next);
        this.service.isStarting$.pipe(takeUntil(this.destroyed$)).subscribe(next => this.isStarting = next);
    }
    ngOnDestroy() {
        this.destroyed$.next(true);
        this.destroyed$.complete();
    }
}