title: Angular .removeAt(i) at FormArray does not update in DOM - Angular
body: <p>I thought it was an issue with my implementation but seems that my code for creating dynamic FormArray should be functional based from <a href="https://stackoverflow.com/questions/53040555/angular-removeati-not-removing-element">this question</a> I raised. When I integrate it to my project, the remove function does delete the element from the FormArray, but it does not reflect in the interface/ does not remove object from the DOM. What could be causing this?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {
    Component,
    VERSION
  } from '@angular/core';
  import {
    FormGroup,
    FormControl,
    FormArray,
    Validators,
    FormBuilder
  } from '@angular/forms';
  
  @Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
  
    objectProps: any[];
  
    public dataObject = [{
        "label": "Name",
        "name": "name",
        "type": "text",
        "data": ""
      },
      {
        "label": "Contacts",
        "name": "contacts",
        "type": "inputarray",
        "array": []
      }
    ]
    form: FormGroup;
  
    constructor(private _fb: FormBuilder) {}
  
    ngOnInit() {
  
      const formGroup = {};
      for (let field of this.dataObject) {
        if (field.type == "inputarray") {
          console.log("THIS IS " + field.type)
          formGroup[field.name] = this._fb.array([''])
        } else {
          console.log("THIS IS " + field.type)
          formGroup[field.name] = new FormControl(field.data || '') //, this.mapValidators(field.validation));
        }
      }
  
      this.form = new FormGroup(formGroup);
    }
  
    addFormInput(field) {
      const form = new FormControl('');
      ( &lt; FormArray &gt; this.form.controls[field]).push(form);
    }
  
    removeFormInput(field, i) {
      ( &lt; FormArray &gt; this.form.controls[field]).removeAt(i);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form *ngIf="form" novalidate (ngSubmit)="onSubmit(form.value)" [formGroup]="form"&gt;
    &lt;div *ngFor="let field of dataObject"&gt;
      &lt;h4&gt;{{field.label}}&lt;/h4&gt;
      &lt;div [ngSwitch]="field.type"&gt;
        &lt;input *ngSwitchCase="'text'" [formControlName]="field.name" [id]="field.name" [type]="field.type" class="form-control"&gt;
        &lt;div *ngSwitchCase="'inputarray'"&gt;
          &lt;div formArrayName="{{field.name}}" [id]="field.name"&gt;
            &lt;div *ngFor="let item of form.get(field.name).controls; let i = index;" class="array-line"&gt;
              &lt;div&gt;
                &lt;input class="form-control" [formControlName]="i" [placeholder]="i"&gt;
              &lt;/div&gt;
              &lt;div&gt;
                &lt;button id="btn-remove" type="button" class="btn" (click)="removeFormInput(field.name, i)"&gt;x&lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;button id="btn-add" type="button" class="btn" (click)="addFormInput(field.name)"&gt;Add&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;button type="submit" class="btn btn-danger btn-block" style="float: right; width:180px" [disabled]="!form.valid"&gt;Save&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>