CODEWITHSUNDEEP
angulartypescript
c0micrage
c0micrage

Reputation: 1180

Angular Material Can't pass data object to matdialog dialog

I checked on a few post here and double checked on how to pass data from an Angular Component to MatDialog but I am getting 'undefined' when the dialog is loading.

Here is my code so far

import { MatDialog } from '@angular/material';

let dialogReff = this.dialog.open(MyComponent,
        {
          panelClass: 'custom-dialog-container',
          data: { myObject: selectedObject},
          disableClose: true
        });

I added a breakpoint here and verified that selectedObject contains all the fields and not 'undefined'

In my dialog constructor

import { Component, OnInit, AfterViewInit,  Inject, ViewChild, ElementRef } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { FormControl, Validators } from '@angular/forms';

    constructor(public dialogRef: MatDialogRef<InventoryRequiredInfoViewerComponent>,
        @Inject(MAT_DIALOG_DATA) public data: { myObject: any}) {
           
       var test = data.myObject;
    }

When I break here, the data.myObject is undefined.

I added the dialog class to app.module.ts sections:

@NgModule({
  declarations:

and

entryComponents:

I read a few post and can't figure out why the data object is not successfully be passed to the MatDialog. Any help is appreciated.

Upvotes: 0

Views: 3868

Answers (2)

Daniel Luna
Daniel Luna

Reputation: 341

Hi try to modify your code as follows:

    let dialogConfig = new MatDialogConfig();

    dialogConfig.disableClose = true;
    dialogConfig.autoFocus = true;
    dialogConfig.maxWidth = '400px';
    dialogConfig.panelClass = 'custom-dialog-container';
    dialogConfig.data = {
      myObject: selectedObject,
    };

 let dialogReff = this.dialog.open(MyComponent, dialogConfig);

I hope I've helped you

Regards

Upvotes: 0

Herman Lule
Herman Lule

Reputation: 71

I think you are able to get the data but you're redefining it in the constructor. Try this: @Inject(MAT_DIALOG_DATA) data

Upvotes: 1

Related Questions