Using a conditional in HTML/Typescript?

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="" height=35px>
       <a href="" class="button" target="_blank"></a>
       <input type="image" id="info" title="Click for description" src="" (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">
    
</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.