i am using material ui to open a component inside of a Mat-Dialog. When I close the dialog, my subscription to the dialogRef wont trigger.
The parentComponent calls the editCatering() to open the dialog.
parentComponent:
import { MatDialog } from '@angular/material/dialog';
export class BewirtungListTableComponent ...{
constructor(..., public dialog: MatDialog,...) {}
editCatering(data){
this.requestSub = this.guestService.getGuestsByCateringId(bewirtung.id).subscribe((guest: Guest[]) => {
let dialogRef = this.dialog.open(BewirtungEditComponent, {
data: {data, guest},
disableClose: true,
autoFocus: false
});
dialogRef.afterClosed().subscribe(result=>{
console.log("dialog closed")
console.log(result)
})
};
Then the dialogComponent closes on the onSubmit() call;
...
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
...
export class BewirtungEditComponent ...
constructor(@Inject(MAT_DIALOG_DATA) public data,..., public dialogRef: MatDialogRef<BewirtungEditComponent>){}
onSubmit() {
...
this.updateSub = this.bewirtungService.updateCatering(cateringCreate).subscribe(
(b: Bewirtung) => {
...
this.dialogRef.close(b)
},
() => this.notificationService.error('Die Bewirtung konnte nicht geändert werden.')
);
}
else {...}
}
I checked the dialogRef in the states of the parentComponent and the dialogComponent: They have the same ID and after closing the dialogRef`s state changes to 2.
Any idea why the dialogRef.afterClosed().subscribe() doesnt do anything?
UPDATE
I also tested to move the afterClosed().subscription to the dialogComponent:
onSubmit() {
...
this.updateSub = this.bewirtungService.updateCatering(cateringCreate).subscribe(
(b: Bewirtung) => {
...
this.dialogRef.close(b);
console.log(this.dialogRef)
this.dialogRef.afterClosed().subscribe(()=>console.log("after closed editComponent"))
},
() => this.notificationService.error('Die Bewirtung konnte nicht geändert werden.')
);
}
But even there i dont get anything.