[SOLVED] 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:

  • 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
    // Opens the modal ModalNewComponent
    const modalDialog = this.matDialog.open(ModalnewComponent, this.dialogConfig);   

This is from ModalNewComponent:

   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() {


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

closeModal() {
     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

 .open(ModalnewComponent, this.dialogConfig)
 .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)

Leave a Reply

Your email address will not be published. Required fields are marked *