Add ngModel to input with dynamic html in typescript, Angular

Question

I want to add a td dynamically in a html table, with an input inside, I want the input to have ngModel attribute and to be like this:

<td><input type="number" name="Price" [(ngModel)]="Product.Price"></td>

I added the td in my ts, like:

td = document.createElement('td');
input = document.createElement('input');
input.setAttribute('type', 'number');
input.setAttribute('name', 'Price');
td.appendChild(input);
tr.appendChild(td);

now my question is, how to add ngModel to the dynamic td?

Answer 1

Two-way-bound ngModel is designed for template driven forms rather than the dynamic forms where you are adding the things dynamically.

If you already have access to the element dynamically, you can add keyUp event to it. So you can access the values typed in.

<td><input type="number" name="Price" [(ngModel)]="Product.Price"></td>
I added the td in my ts, like:

td = document.createElement('td');
input = document.createElement('input');
input.setAttribute('type', 'number');
input.setAttribute('name', 'Price');
td.appendChild(input);
tr.appendChild(td);

input.addEventListener('keyup', function(event) {
      console.log(event);
})