[SOLVED] Data from MatDialogConfig to MatDialog

Issue

I have this FirstModalComponent that opens a ModalNewComponent. In the opened modal (ModalNewComponent), I have a save button that I need it to:

• Pass an array let’s say this.array to FirstModalComponent
• Pass flag toSave = true, so I can do things in the parent based on this flag

I’ve seen something about when closing the ModalNewComponent to pass information in the close method, but how do I get that info back in FirstModalComponent since close is called on the html of ModalNewComponent and not in it’s parent?
basically, how do I get the data from ModalNewComponent into FirstModalComponent? Thanks.

This is from FirstModalComponent:

dialogConfig = new MatDialogConfig();

constructor(public matDialog: MatDialog) { }

openModal(id: string) {
    this.dialogConfig.data = {      
      initPage: (id == "open-search-modal") ? 'open' : 'new'
    };

    // Closes itself
    this.matDialog.closeAll();        
    
    // Opens the modal ModalNewComponent
    const modalDialog = this.matDialog.open(ModalnewComponent, this.dialogConfig);   
    }

This is from ModalNewComponent:

constructor(
   public dialogRef: MatDialogRef<ModalnewComponent>,
   @Inject(MAT_DIALOG_DATA) data: any) {
   this.initPage = data.initPage;
 }

async save() {
    this.toSave = true;   
    this.array = [1,2,3]; 
 }

 closeModal() {
   this.dialogRef.close();
 }

Solution

In your ModalNewComponent component, when closing the modal, you could send the desired data to be passed into your FirstModalComponent, for example:

closeModal() {
   this.dialogRef.close({ 
     save: this.toSave, 
     theData: 'This is the data I want to pass around' 
   });
}

Then in your FirstModalComponent component, you need to subscribe to matDialog to get the data back from ModalNewComponent when closes

this.matDialog
 .open(ModalnewComponent, this.dialogConfig)
 .afterClosed()
 .subscribe((response) => {
    if (response.save) {
       // do something with response theData
       console.log('the Data:', response.theData);
    }
 })

Answered By – Andres2142

Answer Checked By – Jay B. (BugsFixing Admin)