How to execute subscribe method inside subscribe?

Question

I'm trying to implement somethink like that (I will show pseudo-code because real implementation is too big for paste it here)

FunctionOne(){
  const dialogRef = this.dialog.open(ShowSomethinComponent)

  const subForDialog = dialogRef.componentInstance.someAction$
      .subscribe((response) => {
        this.openReportIssueModal(response, dialogRef) 
      });
  
}


openReportIssueModal(dialogRef: MatDialogRef<ShowSomethinComponent, any>){
    this.reportIssueModalService.onModalClosed.subscribe((data) => {
      dialogRef.componentInstance.DoSomething();
})

// explanation from service
onModalClosed from service is:  onModalClosed = new Subject<boolean>();

// ****simply triggered from HTML****
private reportMeasurementSubject = new Subject<InspectionMeasurement>();
  reportMeasurementAction$ = this.reportMeasurementSubject.asObservable();

openReportIssueModal(meassurement: InspectionItem) {
    this.reportMeasurementSubject.next(meassurement)
  }

// ****from service****
this.reportIssueDialogRef.afterClosed().subscribe((issueSavedSuccessfully: boolean) => {
  this.onModalClosed.next(issueSavedSuccessfully);
            })

problem is that first time onModalClosed emit, all is okey
but after it emits second time , it trigger subscribe function from openReportIssueModal two times,
when it emit third time , it trigger it three times etc.

Why it works like that?

recreated problem, please click start flow > click emit > back > click emit> back ....... and see console result

https://stackblitz.com/edit/mat-dialog-example-ndobeg?file=app/app.component.ts

First, you Question is not clear, I think you need to add all Code implementations to make it easy to understand your question. Here are notes about use Unsubscribe any Observable/Subscription after completing your event, https://stackoverflow.com/questions/38008334/angular-rxjs-when-should-i-unsubscribe-from-subscription, https://dev.to/nikosanif/4-1-ways-how-to-unsubscribe-from-observables-in-angular-like-a-21f5 and https://medium.com/m/global-identity?redirectUrl=https%3A%2F%2Fblog.bitsrc.io%2F6-ways-to-unsubscribe-from-observables-in-angular-ab912819a78f — ahmed hamdy, Oct 24 '22 at 19:13

score 0 · Accepted Answer · answered Oct 24 '22 at 19:41

0

Well, you are subscribing to onModalClosed each time openReportIssueModal is called. The subscription is never unsubscribed, so multiple subscriptions will be instantiated. Since you also have a Subject which never completes, you basically created a memory leak.

Good news: You can easily prevent this behavior if you use rxjs take operator, to only take the first value emitted by onModalClosed and afterwards complete (basically unsubscribe):

this.reportIssueModalService.onModalClosed.pipe(take(1)).subscribe((data) => {
      dialogRef.componentInstance.DoSomething();

This logic probably also applies to your someAction$ variable, but since I am not sure how it was instantiated, I cannot tell you for sure.

Note: A more declarative pattern would be the following. You would switch to a new observable which will then be subscribed to. New emissions will be omitted until the first value from onModalClosed is emitted.

const subForDialog = dialogRef.componentInstance.someAction$.pipe(
  exhaustMap(() => this.reportIssueModalService.onModalClosed.pipe(
    take(1)
  ))
)
.subscribe((response) => {
  dialogRef.componentInstance.DoSomething();
});

answered Oct 24 '22 at 19:41

Fabian Strathaus

3,192
1
4
26

thank Yoy for explanation, I updated code with some examples, maybe it will say You something more? – ruddnisrus Oct 24 '22 at 20:55
Did you try to implement my suggested implementation yet? Or do you have any specific question you want to have an answer for? `openReportIssueModal` seems to have been reimplemented, but not sure how this fits my suggested solution. – Fabian Strathaus Oct 25 '22 at 06:19
I mean that even if I will wrap onModalClosed subscription to const and then unsubscribe the behaviour is the same – ruddnisrus Oct 25 '22 at 14:56
I am not sure what you are trying to ask exactly. Can you maybe rephrase it a little bit when editing your question and point to the code you are referring to? – Fabian Strathaus Oct 25 '22 at 15:22
Fabian Strathaus, I recreate problem with easy way in stackblitz https://stackblitz.com/edit/mat-dialog-example-ndobeg?file=app/app.component.ts – ruddnisrus Oct 25 '22 at 18:06
Fabian Strathaus , I recreate problem in stackblitz https://stackblitz.com/edit/mat-dialog-example-ndobeg?file=app/app.component.ts click: start flow, then click emit value multiple times (click > then back > click > then back etc) and see console – ruddnisrus Oct 25 '22 at 18:07

How to execute subscribe method inside subscribe?

1 Answers1