title: Display an array object on view in Angular
body: <p>I have simple angular form to save user input. Where user can click on <code>Add More</code> button to add as many row they want which is working fine.</p>
  <p>And I want that if <code>testData</code> (which defined on component) have length then this <code>testData</code> should be already in-place on component init, but I don't know how to do this.</p>
  <p>component.ts</p>
  <pre><code>import { Component, VERSION, OnInit } from '@angular/core';
  import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
  
  @Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
  })
  export class AppComponent implements OnInit {
   productForm: FormGroup;
   testData = [{ &quot;name&quot;: &quot;test-1&quot;, &quot;age&quot;: &quot;24&quot; }, { &quot;name&quot;: &quot;test-2&quot;, &quot;age&quot;: &quot;32&quot; }, { &quot;name&quot;: &quot;Test-3&quot;, &quot;age&quot;: &quot;20&quot; }]
   constructor(private fb: FormBuilder) {}
  
   ngOnInit() {
     this.addRowData();
     this.productForm = this.fb.group({
     stepName: 'Field Data',
     fieldData: this.fb.array([]) ,
    });
   }
  
   fieldData() : FormArray {
    return this.productForm.get(&quot;fieldData&quot;) as FormArray
   }
  
   newFieldData(): FormGroup {
    return this.fb.group({
     name: '',
     age: '',
    })
   }
  
   addRowData() {
     this.fieldData().push(this.newFieldData());
   }
  
   removeRowData(i:number) {
     this.fieldData().removeAt(i);
   }
  
   onSubmit() {
     console.log(this.productForm.value);
   }
  }
  </code></pre>
  <p>index.html</p>
  <pre><code>&lt;table formArrayName=&quot;fieldData&quot;&gt;
      &lt;tr *ngFor=&quot;let data of fieldData().controls; let i=index&quot; [formGroupName]=&quot;i&quot;&gt;
        &lt;td&gt;
            Name :
            &lt;input type=&quot;text&quot; formControlName=&quot;name&quot; class=&quot;form-control&quot;&gt;
        &lt;/td&gt;
        &lt;td&gt;
            Age:
            &lt;input type=&quot;text&quot; formControlName=&quot;age&quot; class=&quot;form-control&quot;&gt;
        &lt;/td&gt;
        &lt;td&gt;
            &lt;button (click)=&quot;removeRowData(i)&quot; class=&quot;btn btn-danger&quot;&gt;Remove&lt;/button&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th width=&quot;150px&quot;&gt;&lt;button type=&quot;button&quot; (click)=&quot;addRowData()&quot; class=&quot;btn btn-primary&quot;&gt;Add More&lt;/button&gt;&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>