angulartypescriptmat-dialog

Data from MatDialogConfig to MatDialog


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

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);
        }
     })