how to dynamically add id to the table rows so that they can be identified uniquely

Question

I have a table structure in manage.component.html which gets populated with the data from the server. I have a 'edit' button which can be used to edit a cell in the column.

Requirement:I want to uniquely identify each cell which can be further be used to edit and send back the value back value to the server for update.

I tried to append "counter" to the "id" of the so this can be used to uniquely identify each row cell, but the "counter" is not setting on the "id"

manage.component.html

<tbody>
          <tr *ngFor="let work of workflows$">
            <td>{{work.req_id}}</td>
            <td><input id="btnn{{count$}}" type="text" value="{{work.client_ip}}" maxlength="4" placeholder="name" onload="addID()"/></td>
            <td>{{work.client_type}}</td>
            <td>{{work.project}}</td>
            <td><button (click)="edit()" type="button" class="btn btn-primary">Edit</button></td>
          </tr>
</tbody>

manage.component.ts

export class ManageComponent implements OnInit {

count$ = 0;

edit(event){
    document.getElementById('btnn').focus();
  }

addID(){
    this.count$ = 5;
  }
}

when i click the "edit" button the focus should be on the element of the rows and after editing when i click "send" button the change in the value should be accessible on the .ts file so that the value can be send back to the server.

Answer 1

There are various method to do it. But since you wanted to get it by id or class, check out the below code

<tbody>
          <tr *ngFor="let work of workflows$; let i = index">
            <td>{{work.req_id}}</td>
            <td><input id="btnn-{{i}}" type="text" value="{{work.client_ip}}" maxlength="4" placeholder="name" onload="addID(i)"/></td>
            <td>{{work.client_type}}</td>
            <td>{{work.project}}</td>
            <td>

            <!-- Pass the index i as a parameter in edit() method -->
            <button (click)="edit(i)" type="button" class="btn btn-primary">Edit</button>

            </td>
          </tr>
</tbody>

and in your typescript

edit(_index){
    document.getElementById('btnn-'+_index).focus(); //get the element by id
  }

Hope that helps