Unsubscribe in Observable with Firebase

Question

Hello

I need help with a problem that is happening to me. I have a code to listen to changes in the firebase database. So, I have to subscribe to an observable that brings me the BD data. However, when I delete this object being monitored I need to unsubscribe, but before I delete the object. Otherwise an error of the type is triggered firebase error Missing or insufficient Permissions. I thought about the possibility of capturing only the error of this type (Firebase error insuficient permission). This would already be a solution for me, however, I do not know how to make the unsubscribe inside the catchError rxjs (I do not even know if it is possible). See that the two takeUntil has a Notifier that are different. The first use for when the user logs out and the second for when the user leaves the page. I can’t use them because there are many objects that use this same subscribe and if I apply this.appState.onDestroy.next() or this.onDestroy.next() when deleting an object i will disable the valueChanges of the other objects. How to proceed?

Code below:

import {Subject} from 'rxjs';
import {switchMap, takeUntil} from 'rxjs/operators';
import {AppStateService} from '../service/app-state.service';

export abstract class processor implements OnDestroy {


  ShopSubject: Subject<string> = new Subject<string>();
  onDestroy: Subject<void> = new Subject<void>();
  data: any;
  protected constructor(
    protected appState: AppStateService
  ) {
 
     this.ShopSubject
      .pipe(switchMap(id => {
        return this.shopService.docValueChanges(`shop/${id}`);
      }))
      .pipe(takeUntil(this.appState.onDestroy))
      .pipe(takeUntil(this.onDestroy))
      .subscribe(data => {
        this.data= data;
      });
    }

 ngOnDestroy(): void {
    this.onDestroy.next();
 }
}

Answer 1

I didn’t really understand much in what situation you would like to cancel the valueChanges subscription when deleting the same document. does not make sense because when it happens it does not issue anymore. about subscribe can see the tips below.

The ideal in most situations is to never need to subscribe to the observable within the component code and use it directly in the template using async pipe. By using this technique the angle automatically gives you unsubscribe.

    export abstract class Processor {
        ShopSubject: Subject<string> = new Subject<string>();
        data: Observable<any>;

        protected constructor(protected appState: AppStateService) {
            this.data = this.ShopSubject.pipe(
                switchMap(id => this.shopService.docValueChanges(`shop/${id}`))
            );
        }
    }

in the template use

<ng-container *ngIf="data | async as mydata">
    seu html...
<ng-container>

If you still need to use subscribe within the component code use:

export abstract class Processor implements OnDestroy {
        ShopSubject: Subject<string> = new Subject<string>();
        data: any;
        mySubscription: Subscription;
    
        protected constructor(protected appState: AppStateService) {
            this.mySubscription = this.ShopSubject.pipe(
                    switchMap(id => this.shopService.docValueChanges(`shop/${id}`))
                )
        .subscribe(data => this.data= data);
    }

    ngOnDestroy(): void {
        this.mySubscription.unsubscribe();
    }
}

extrapolating the situation. if their status is observed by the exclusion of the element you can use a new observable with stateChanges(['Removed']) instead of valueChanges. and to run things before leaving the page you can even use the Candeactivate of the Router to run a logic.