Angular's (9.1.15) MatDialog .afterClosed().subscribe() returning undefined, despite sending data on .close(..) method - angular9

Question

I'm working on a project making use of MatDialog on several instances.
In this particular example, I use two distinct modal dialogs in similar manner, the thing is one works properly as it should, and the other does not, returning undefined on the on .afterClosed().subscribe() data.
Code is as follows:
(only relevant lines as the code is quite extensive)
stocks.component.ts
(main stock record management component)
import { Component, OnInit, OnDestroy } from '#angular/core';
import { MatDialog } from '#angular/material/dialog';
import { NewModalComponent } from '../modal/new/new.component';
import { AddModalComponent } from '../modal/add/add.component';
...
export class StocksComponent implements OnInit, OnDestroy {
constructor(
private dialog: MatDialog,
...
) {}
...
click(what) {
switch (what) {
case 'new':
this.dialog.open(NewModalComponent, {
width: '440px',
height: '600px',
autoFocus: false,
}).afterClosed().subscribe(
(data) => {
console.log('modal-new > data :: ',data); // -- returns the passed object
}
);
break;
case 'add':
this.dialog.open(AddModalComponent, {
width: '95%',
height: '85%',
autoFocus: false,
data: {
...
},
}).afterClosed().subscribe(
(data) => {
console.log('modal-add > data :: ',data); // -- returns undefined
}
);
break;
}
}
}
new.component.ts
(simple modal to select the type of new stock)
import { Component, OnInit, OnDestroy } from '#angular/core';
import { MatDialogRef } from '#angular/material/dialog';
...
export class NewModalComponent implements OnInit, OnDestroy {
constructor(
private dialogRef: MatDialogRef<NewModalComponent>,
...
) {}
...
click(what, data) {
switch (what) {
case 'newtype':
this.dialogRef.close(data); // -- 'data' contains an object
break;
}
}
}
add.component.ts
(modal to add the products to the new stock)
import { Component, OnInit, OnDestroy, Inject } from '#angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '#angular/material/dialog';
...
export class AddModalComponent implements OnInit, OnDestroy {
constructor(
#Inject(MAT_DIALOG_DATA) public data,
private dialogRef: MatDialogRef<AddModalComponent>,
) {}
...
click(what) {
switch (what) {
case 'close':
this.dialogRef.close(this.products); // -- 'this.products' contains an object
break;
}
}
}
As you can see, both modals are summoned the same way and both make use of the same methods to subscribe to the data after closed, yet one successfully returns the data while the other does not. Am I missing something obvious..? ..or not so obvious?
Any help is appreciated, as I am in a rather tight schedule and stuck on this issue!!
Thank you all in advance.

Answer 1

After a bit of debuging, and practically line-per-line testing, I discovered the source of the issue.
In my add.component.ts I have multiple child components, one of them being list.component.ts to display a complete list of the added products, as they are searched and selected (within another separate child component).
The problem resided in that list child component containing the following code:
ngOnDestroy() {
this.subscriptions.forEach((element) => { element.unsubscribe(); });
this.dialog.closeAll();
}
I found out that the this.dialogRef.close(this.products); line of the add component was indeed working properly, but upon receiving the 'close' command to itself, I suppose it triggers the close of its child components and when closing the list that this.dialog.closeAll(); method got automatically triggered and would override / overlap the original .close(..), thus resulting in the undefined.
This is probably an easy one for many of you, but I have little more than a year of experience in angular and so, small details like these can sometimes escape my graps.. at least for a while.
Anyway, I'm hoping this might help someone, either new or experienced, as all my searches regarding this issue only let to questions completely unrelated.
Best regards.