How to execute subscribe method inside subscribe?


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

  const dialogRef =

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

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

// 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) {

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

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


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) => {

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(
.subscribe((response) => {

Answered By – Fabian Strathaus

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published