Mat-table inside mat-dialog

Issue

I want to create a table inside a dialog box so when user clicks on a link they can see the table in a dialog box.

I created mat-table and dialog box. Only problem is dialog.open() function takes components as a parameter so dialog box shows all of the page again. Is there a way to give it tables id or something so that i can only show specific table in it?

constructor(public dialog: MatDialog) { }
  
openDialog() {
  this.dialog.open(UserProfileComponent);
}

html
<a value="case1" (click)="openDialog()">Click for details</a>

Solution

In the ts thats open the popup:

this.dialog.open(DialogOverviewExampleDialog, {
  data: {id: someId}
});

In the popup:

  constructor(
    public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
    @Inject(MAT_DIALOG_DATA) public data: DialogData) {
    if(data.id) {
     // do something
    }
  }

Answered By – oz1985oz

Answer Checked By – David Goodson (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.