Using a conditional in HTML/Typescript?

Question

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.

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
– Carlo Bos, Commented Nov 3, 2020 at 0:40
You might want to close this as it is pretty much dupe of your question here: stackoverflow.com/questions/64654738/… — PeS
– PeS, Commented Nov 3, 2020 at 0:55

Mar · Accepted Answer · 2020-11-03 00:40:54Z

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.

answered Nov 3, 2020 at 0:40

Mar

856 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using a conditional in HTML/Typescript?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related