How to prevent memory leak of subscriptions creation when perform an event?

Question

I need to make sure there is a single subscription (e.g. within the constructor) and chain the flow of events from another component to an observable property of this component.

The code I wrote does not prevent the memory-leak and creates a new subscription at each event.

Image component ts

export class ImagePanelComponent{
   constructor(
    private servicee: service,
    private status: status,
  ) {
  }

  updatePage(viewerPage: number){
    this.service.pages$.pipe(take(1)).subscribe(
      (pages) => this.status.updatePage$.next(pages[viewerPage - 1]),
    );
  }
}

Image component HTML

<x-panel>
  <div content>
        <osd-component
            *ngIf="viewerData"
            [viewerData]="viewerData"
            [page]="pageNumber"
            (pageChange)="updatePage($event)">
        </osd-component>
        <p *ngIf="!viewerData">Found no source file</p>
  </div>
</x-panel>

Answer 1

Creating a BehaviorSubect to keep track of the pageChange event emissions should work for this.

Something like:

export class ImagePanelComponent{
   constructor(
    private servicee: service,
    private status: status,
  ) {
     this._setSubscriptions();
  }

  private pages$ = new BehaviorSubject(0);

  updatePage(viewerPage: number){
    this.pages$.next(viewerPage);
  }
  
  _setSubscriptions() {
    // Here is your subscription to pages$ where you'll call your service to update the page number.
    // Note: You'll need to handle your unsubscribe logic (this.unsubscribe) 
    this.pages$.pipe(takeUntil(this.unsubscribe)).subscribe(
      (page) => this.service.SomeUpdatePageMethod(pages[page - 1])
    );
  }

}