How do I pass a variable in an id field in html?

Question

Devs!

I have the following problem: On my Ionic html page, I have a structure that creates some elements based on how many photos I have in my Storage (internal database)

<ion-col size="6" *ngFor="let photo of photoService.photos">
    <img [src]="photo.data" />
    <p>
      <ion-checkbox id="" color="primary"></ion-checkbox> 
      {{photo.description}}
    </p>
  </ion-col>

That is, for each photo I create a div with the image, a checkbox and the description of the image.

I had doubts about how to relate each checkbox to its corresponding image and came up with the idea of passing the ID of the database image to the checkbox id. But as it is generated dynamically, I wanted to pass the variable inside the ID of the element in html.

It would be something like:

  <ion-col size="6" *ngFor="let photo of photoService.photos">
    <img [src]="photo.data" />
    <p>
      <ion-checkbox id="{{photo.id}}" color="primary"></ion-checkbox> 
      {{photo.description}}
    </p>
  </ion-col>

Is this possible in html? If not, how could I do it?

Answer 1

Try doing it this way

<ion-checkbox [id]="photo.id" color="primary"></ion-checkbox>