0

In my project I'm using a mat-dialog to display a description of an object. The objects are generated through ngFor, like this:

<mat-card id="CARDBOX" *ngFor="let box of box">
       <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>

It's a basic card object that has an info icon that when clicked, opens the dialog, which looks like this:

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

This works. However, it is displaying EVERY description in box, rather than just the corresponding one. I know this is because of the ngFor running through every item. Is there a way so that it will only display the one correct description, perhaps through use of some kind of conditional? I would ideally like to keep everything as abstracted as possible, I figured using some kind of conditional in the HTML would make the most sense but I'm not sure if that exists? Please let me know if you need more detail.

bensalerno
  • 467
  • 1
  • 6
  • 22
  • Are you using the same parameter for the list of boxes `box` and the single box in the for loop `box`? I recommend using a different variable name. Also you can pass the selected box to your open function `openDialog(b)` then use this as an input parameter to your card component. – Carlo Bos Nov 03 '20 at 00:40
  • You might want to close this as it is pretty much dupe of your question here: https://stackoverflow.com/questions/64654738/display-different-information-in-mat-dialog-depending-on-object – PeS Nov 03 '20 at 00:55

1 Answers1

1
<div mat-dialog-content *ngFor="let box of box">
    {{box.description}}
</div>

Your ngFor directive is looping through with an element whose name (and thus its reference if I'm not making a mistake here) is equal to its container.

Have you tried this?

<div mat-dialog-content *ngFor="let boxEl of box">
    {{boxEl.description}}
</div>

Your code might not be able to differentiate a "box" (element) from a "box" iterable.

Mar
  • 85
  • 6