.subscribe firing multiple times when modal is closed

Question

I have this code which opens a modal. When the modal is closed a call to this.loadClientOccupations() happens and information is refreshed.

  openAddOccupationComponent(servicePeriod: IServicePeriod): void {
    this.diaglogRef.open(OccupationAddComponent, {
      width: '25%',
      minHeight: '60%',
      data: {
        servicePeriod: servicePeriod
      },
      panelClass: 'no-padding-modal',
      disableClose: true
    });

    this.diaglogRef.afterAllClosed.subscribe(() => {
      this.loadClientOccupations();
    })
  }

What happens though is if you open the modal again and then close it, two calls to this.loadClientOccupations() happens. Open the modal a third time and close it and then three calls to this.loadClientOccupations() happens. This just keeps growing. Is there a way for me to limit these calls to just the first event? Is something not being destroyed that needs to be? This is the code that closes the modal.

  addOccupation(occupationDetails: IOccupation){
const occupation: IAddClientOccupationDetails = {
  occupationId: occupationDetails.id,
  servicePeriodSequence: this.data.servicePeriod.servicePeriodSequence,
  endDate: this.addOccupationForm.controls['endDate'].value,
  reserveClassType: this.addOccupationForm.controls['reserveClass'].value,
  startDate: this.addOccupationForm.controls['startDate'].value,
  clientId: this.clientId
};

let command: IAddClientOccupationsCommand = {
  clientOccupationInformation : occupation
};

this.clientOccupationService.addClientOccupations(command).subscribe(res =>
{
  this.dialogRef.close(occupation);
},(err: HttpErrorResponse) => {
  this.occupationEditError = new CarsError();
  this.occupationEditError.errorMessages = err.error.errors.ClientOccupationInformation;
  console.log(this.occupationEditError);
});

}

FAISAL · Accepted Answer · 2021-06-10T18:43:23.170

3

Use the afterClosed() method instead of afterAllClosed. Also, to avoid any memory leaks, you need to unsubscribe from the subscription. In your case use the take operator. So your code would become:

openAddOccupationComponent(servicePeriod: IServicePeriod): void {
  const diaglogRef = this.diaglog.open(OccupationAddComponent, {
  width: '25%',
  minHeight: '60%',
  data: {
    servicePeriod: servicePeriod
  },
  panelClass: 'no-padding-modal',
  disableClose: true
});

dialogRef.afterClosed().pipe(
    take(1)
).subscribe(() => {
    this.loadClientOccupations();
})

}

Change your constructor to:

constructor(dialog: MatDialog) { }

Link to official documentation examples. Please check the code here for more information.

edited Jun 10 '21 at 18:43

answered Jun 10 '21 at 18:21

FAISAL

33,618
10
97
105

I'm getting core.js:5980 ERROR TypeError: this.diaglogRef.afterClosed is not a function. Am I missing something? – Christopher Johnston Jun 10 '21 at 18:25
What version of angular are you using? – FAISAL Jun 10 '21 at 18:26
I'm using version 11 – Christopher Johnston Jun 10 '21 at 18:27
I am assuming that your `dialogRef` is of type `MatDialog`. This would be wrong way of doing it. Change the code according to my updated answer – FAISAL Jun 10 '21 at 18:29
dialogRef is of type MatDialog – Christopher Johnston Jun 10 '21 at 18:30
Now I'm getting "Cannot find name 'take' – Christopher Johnston Jun 10 '21 at 18:49
I'm dumb, needed the import. This works like a charm now. Thank you very much! – Christopher Johnston Jun 10 '21 at 18:54
@Faisal is it really necessary to unsubscribe from afterClosed()? it always completes: https://stackoverflow.com/questions/58198544/angular-dialogref-unsubscribe-do-i-need-to-unsubscribe-from-afterclosed – LarryP Jun 13 '22 at 07:50

.subscribe firing multiple times when modal is closed

1 Answers1