How to make the index from ngFor part of an html tag value

June 1, 2023

I have an ngFor loop set up like this:

<div *ngFor="let record of this.RecordsProcessed; let i = index">
   <div class="row my-16" data-test='test'_{{i}}>
        <div class="col-4">Id:</div>
        <div class="col-8">{{record?.Id}}</div>
    </div>
</div>

I want to put the index from ngFor on the data-text tag within the html. Is it possible to do something like this within the html?

>Solution :

Try like this:

  <div *ngFor="let record of this.RecordsProcessed; let i = index">
  <div class="row my-16" [attr.data-test]="'test_' + i">
       <div class="col-4">Id:</div>
       <div class="col-8">{{record?.Id}}</div>
   </div>
</div>

[] brackets let angular know that everything inside of "" is typescript code.