How to generate an empty row in table with specific fields in angular 7

Question

I have a HTML page as shown in picture.

Here "Add Rows" is a button whose functionality is to create an empty row as shown in picture and the user can enter details in the boxes provided.

As I am new to angular 7 pls suggest me which is the best way to do this and add a sample code snippet if possible.

Answer 1

the easies way in my eyes is to create a variable like

rowCount = [];

this is an array.

In your html you create an ngFor look where you iterate over the array and created a number of lines you have in your array.

addRow() is just pushing an item, what could be a model or so to the array. What will result as render of new line.

the ts code

criteriaFormArray = this.formBuilder.array()
....
private insertInFormArray(control: AbstractControl) {
    this.criteriaFormArray.push(control);
  }

the rendering

<div
    formArrayName="criteria"
    *ngFor="
      let item of criteriaFormArray.controls;
      let i = index;
      let first = first;
      let last = last
    ">....</div>