I have dynamic id generated by ngFor, how can i change the value of the input?

I am loading a table dynamically with each column, row has a unique ID. How can I change the value of the input inside of the cell dynamically on the OnInit() method?

This is my html column

<td><input class="form-control" placeholder="Title" value=""
           id="title5{{i5}}" name="title5{{i5}}">
</td>

and trying to assign via

for (let i = 0; i < rowsFinal.length; i++) {

    let tempArray: any[] = rowsFinal[i];

    const title5 = <HTMLInputElement>document.getElementById('title5' + i);
    title5.value = 'aaa';
    console.log('title5' + i + "=" + title5.value);
}

My problem is that I can assign any value to the input by its id.

1 answer

  • answered 2019-07-11 07:12 Noshairwan Farooq

    Try using [(ngModel)] in your inputs and then in component.ts file when you change the value of that Model it will be updated in the input Example:

    <tr *ngFor="let item of ListOfItems">
    <td>
    <input [(ngModel)]="item.SomeProperty"/>
    </td>
    </tr>
    

    And then in .ts file.

    this.ListOfItems[0].SomeProperty = "New Value"; //Use loop and condition for your specific object.