how to pass data from dialog box in Angular - html

Question

Right now In my Edit page a user can delete section and subsection but I'm thinking about adding confirmation dialog so that a user will not accidentally delete either of them.
I'm not really sure how I can pass the data between confirmation dialog component and Edit Page component.
The project is not gonna run on on Stackblitz but I have uploaded those two component in here https://stackblitz.com/edit/angular-ivy-ztepf6?file=Edit Component/EditComponent.ts
so I will be really appreciated if anybody can check it out and able to help me. thanks
Edit Component.TS
this is how I open Comfirmation Dialog
openSection() {
let dialogRef = this.dialog.open(ConfirmDialogComponent, {
data: {
isSection: true, isSubsection: false
},
}
);
}
openSubsection(){
this.dialog.open(ConfirmDialogComponent, {
data: {
isSubsection: true, isSection: false
},
});
}
//This is how I'm deleting right now without confirmation Dialog
delete(sec) {
if (this.isSection) {
this.HelpService.deleteHelpSection(sec.id).subscribe(() => {
const index = this.mappedSections.findIndex((value) => value.id == sec.id);
this.mappedSections = this.mappedSections.filter(section => section.id != sec.id)
if (~index) {
this.HelpService.deleteHelpSubsection(sec.id).subscribe(() => {
this.mappedSections = this.mappedSections.filter(section => section.id != sec.id);
})
}
})
} if (this.isSubsection) {
this.HelpService.deleteHelpSubsection(sec.id).subscribe(() => {
const index = this.mappedSections.findIndex((value) => value.id == sec.parentId);
if (~index) {
this.mappedSections[index].subSections = this.mappedSections[index].subSections.filter((subsection) => subsection.id != sec.id)
}
})
}
}

Answer 1

subscribe for the result from the modal.
openSection() {
let dialogRef = this.dialog.open(ConfirmDialogComponent, {
data: {
isSection: true, isSubsection: false
},
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed', result);
if(result){
this.delete(sec)
}
});
}
from the modal component pass the data
<button mat-raised-button (click)="closeDialog()">Close</button>
constructor(
public dialogRef: MatDialogRef<ConfirmDialogComponent>
) {}
closeDialog() {
this.dialogRef.close(true);
}
check this working sample
https://stackblitz.com/edit/angular-pd7vt6?file=src/app/dialog-elements-example.ts