Angular, How to set row ID with *ngFor or any repetition for HTML-table

Question

I want to set an ID for each rows dynamically ngFor or any repetition in Angular.

<div *ngFor="let d of data | async">
        <table border=1>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
            <th>Age</th>
          </tr>
            <tr id="row">
                <td>{{ d.id }}</td>
                <td>{{ d.name }}</td>
                <td>{{ d.email }}</td>
                <td>{{ d.age }}</td>
            </tr>
        </table>

So anyone can help me how to make the rows have IDs like row1, row2, row3, etc?

Thank you

Answer 1

I think in your case, there is no need to use extra index variable:

This will save bit processing from frontend side as it doen't have to maintain any index varible.

Just use :

<tr [attr.id]="d.id">

Inplace of

<tr id="row">