nested Mat-dialogBox closing issue - html

Question

I have one parent raster component from where I am opening my first dialog box and from that dialog box component, i am opening second dialog box. I want to pass data from last dialog box to my parent raster and meanwhile need to close all the dialog boxes but I am not able to get data from second dialog box to first dialog box and because of this, i dont get data in raster component.
Can someone help me to solve this? I have tried to do all the things but still getting undefined. Any kind of help would be nice.
Kindly find my below code.
raster.component.ts
openDialogbox(value): void {
this.emptyTile = value;
const dialogRef = this.dialog.open(AddNewFlyerComponent, {
width: '100em',
height: '50em',
data: {
flyerArray: this.flyers,
emptyPosition: this.emptyTile,
page: this.flyers[0].Seite,
year: this.flyers[0].Jahr,
week: this.flyers[0].KW,
}
});
dialogRef.afterClosed().subscribe(result => {
console.log('The raster dialog was closed', result);
});
}
AddNewFlyerComponent.ts
openDialog(werbenumber): void {
const dialogRef = this.dialog.open(CreateNewFlyerComponent, {
width: '100em',
height: '50em',
data: {
flyerArray: this.data.flyerArray,
werbenumber: werbenumber,
emptyTile: this.data.emptyPosition,
page: this.data.page,
week: this.data.week,
year: this.data.year
}
});
dialogRef.afterClosed().subscribe(result => {
console.log('The 1st dialog was closed', result); // getting undefined
});
}
CreateNewFlyerComponent.ts
addFlyerToEmptyPosition(werbedata: WerbeData) {
const newFlyer = {
ArtNr: this.werbedata.ArtNr,
Filiale: this.werbedata.FILIALE,
Jahr: this.data.flyerArray[0].Jahr,
KW: this.data.flyerArray[0].KW,
Pos: this.data.emptyTile,
Raster: this.data.flyerArray[0].Raster,
Seite: this.data.flyerArray[0].Seite,
WERBE_NR: this.werbedata.WERBE_NR,
EUR_VK: this.a,
EUR_VK_Einheit: this.b,
VK_Einheit: this.c
};
this.flyerHammService.createNewFlyer(newFlyer)
.then(
(response: any) => {
this.returnFlyer = response.data[0]; // This returnFlyer, I want to pass
this.matSnackBar.open('Neuer Flyer wurde erstellt', 'Undo', {
duration: 3000
});
}
).catch(
error => console.log(error)
);
}
CreateNewFlyerComponent.ts
<button mat-dialog-close mat-raised-button [color]="'success'" [mat-dialog-close]="returnFlyer" (click)="addFlyerToEmptyPosition(werbedata)">
{{ 'SPEICHERN' }}
<mat-icon>save</mat-icon>
</button>

Answer 1

Use the same data object for both dialogs. Instead of creating a new object, update the original data object with additional data and pass it into the second dialog:
AddNewFlyerComponent.ts
openDialog(werbenumber): void {
this.data.emptyTile = this.data.emptyPosition; // or was that a typo?
this.data.werbenumber = werbenumber; // or use Object.defineProperty()
const dialogRef = this.dialog.open(CreateNewFlyerComponent, {
width: '100em',
height: '50em',
this.data
});
dialogRef.afterClosed().subscribe(result => {
console.log('The 1st dialog was closed', result); // getting undefined
});
}
To pass the data back to raster, use the same approach:
raster.component.ts
data;
openDialogbox(value): void {
this.emptyTile = value;
this.data = {
flyerArray: this.flyers,
emptyPosition: this.emptyTile,
page: this.flyers[0].Seite,
year: this.flyers[0].Jahr,
week: this.flyers[0].KW,
}
const dialogRef = this.dialog.open(AddNewFlyerComponent, {
width: '100em',
height: '50em',
data: this.data
});
dialogRef.afterClosed().subscribe(result => {
console.log('The raster dialog was closed', result);
});
}