Display different information in Mat-Dialog depending on object?

Question

My project is essentially displaying a bunch of boxes on a screen. Essentially, each box holds a button that, when clicked, will link you to another page. This is the box object.

export interface Allbox {
    image: string, 
    link: string, 
    button_name: string, 
    info: string; 
    description: string;
}

{image: 'assets/image.png', link: 'link1.com',
    button_name: 'B1', info: 'assets/mat-info2.png', description: `this is the description.`
    },

    {image: 'assets/image.png', link: 'link2.com',
    button_name: 'B2', info: 'assets/mat-info2.png', description: `Some more displaying material.`
    },

    {image: 'assets/image.png', link: 'link3.com',
    button_name: 'B3', info: 'assets/mat-info2.png', description: `What I want displayed.`
    },
}

They are generated in HTML like this:

<mat-card id="CARDBOX" *ngFor="let box of allbox">
                    <img class="logoy" src="{{box.image}}" height=35px>
                    <a href="{{box.link}}" class="button" target="_blank">{{box.button_name}}</a>
                    <input type="image" id="info" title="Click for description" src="{{box.info}}" (click)="openDialog()" height=20px/>
 </mat-card>

I want to be able to click an icon and display a description of the box - via mat-dialog. The problem lies within my openDialog() function. I am trying to open and display the description of each box in when clicked. It's a standard mat-dialog in TS:

constructor(public dialog: MatDialog) { }

  ngOnInit() {}

  openDialog(): void {
    const dialogRef = this.dialog.open(DialogBox, {
      width: '400px',
      height: '600px'
    });
  }

  openSomethingElse(): void {
    
  }
}

@Component({
  selector: 'app-dialog',
  templateUrl: './dialog.component.html',
  styleUrls: ['./dialog.scss']
})

export class DialogBox {

  allbox = ALLBOX;

  constructor(public dialogRef: MatDialogRef<DialogBox>) {}

  onNoClick(): void {
    this.dialogRef.close()
  }
}

<title mat-dialog-title></title>
<div mat-dialog-content *ngFor="let box of allbox">
    {{box.description}}
</div>
<div mat-dialog-action>
    <button mat-button (click)="onNoClick()">Close</button>
</div>

The issue is that the mat-dialog is generating perfectly, but it is listing every single description rather than JUST the description I am looking for.

I see the problem, in that the ngFor will append the description of every item in the list. How can I make it so that it will only the corresponding description for the appropriate object?

I looked into making some sort of If statement structure in the TS, alongside making individual dialogs for every object, but I'm not sure how that would work.

What is the best way to get my object descriptions to display in a mat-dialog without displaying all of the descriptions at once? I know this is a lot so please feel free to ask follow up questions.

score 1 · Answer 1 · answered Nov 03 '20 at 00:52

your DialogBox class is initialized with ALLBOX. without looking at how that is initialized, I'm assuming that this value contains all the box Definitions, and that you are looping through each and showing them in the template.

the Material Dialog allows you inject data into the dialog being opened. see The dialog Examples here and look at the Injecting data when opening a dialog example.

with this you can inject the data that you want to show into the dialog.

what I would suggest, instead of having your DialogBox holding a reference to every definition, is to use the injection to pass the specific Box you wish to show when you open the dialog. i.e.

this.dialog.open(DialogBox, {
  data: selectedBox
})

the selectedBox would be the current box you want to display in the Dialog when it's opened.

in your DialogBox, you need to get the data being injected into it. this is achieved by updating your constructor to be

constructor(@Inject(MAT_DIALOG_DATA) public data: DialogData) {}

with this, your DialogBox component can display the data that is injected into it.

this keeps your Dialog generic and simple, and puts the responsibility on the process that opens the dialog to pass in the information that should be displayed.

good luck.

score 1 · Answer 2 · answered Nov 03 '20 at 00:52

Pass data to dialog:

Your app-dialog should take in data in constructor:

export class DialogBox {
....
  constructor(public dialogRef: MatDialogRef<DialogBox>,
      @Inject(MAT_DIALOG_DATA) public data: Allbox) {}
  
....
}

Dialog has one, single box available as data therefore it is easy to display only description passed in:

<title mat-dialog-title></title>
<div mat-dialog-content>
    {{data.description}}
</div>
<div mat-dialog-action>
    <button mat-button (click)="onNoClick()">Close</button>
</div>

In your parent component add parameter to openDialog method and pass that as data to the dialog:

openDialog(box: Allbox): void {
    const dialogRef = this.dialog.open(DialogBox, {
      data: box,
      width: '400px',
      height: '600px'
    });
  }

and finally in HTML:

<mat-card id="CARDBOX" *ngFor="let box of allbox">
  <img class="logoy" src="{{box.image}}" height=35px>
  <a href="{{box.link}}" class="button" target="_blank">{{box.button_name}}</a>
   <input type="image" id="info" title="Click for description" src="{{box.info}}"
        (click)="openDialog(box)" height=20px />
</mat-card>

Display different information in Mat-Dialog depending on object?

2 Answers2

Linked