Angular model and rendering out of sync -

i have angular component has button adds new object array serves model. in component template, have *ngfor loop iterates through objects in array , displays input fields properties of object. have "remove" button next each object removes object array. when following steps ui goes out of sync model , empties fields of items except first one.

1. add 3 new objects array clicking "add" button
2. populate input fields data
3. click remove button on middle item remove it
4. add 1 new object clicking "add" button

what making ui go out of sync model?

here plunker example demonstrates issue example added line in template shows in model array.

@component({   selector: 'my-app',   template: `     <div>     <button (click)="things.push({})">+ add new thing</button>       <br />       <br />       <form #contactform="ngform">         <ng-container *ngfor="let thing of things;let = index">           <input [(ngmodel)]="thing.name" name="name-{{i}}" id="name-{{i}}" placeholder="name"/>           <br />           <input [(ngmodel)]="thing.otherstuff" name="other-{{i}}" id="other-{{i}}" placeholder="other" />           <button (click)="things.splice(i, 1)">remove</button>                     <br />           <br />         </ng-container>       </form>       {{things | json}}     </div>   `, }) export class app {   things: awesome[]   constructor(){     this.things = new array();   } }  @ngmodule({   imports: [      browsermodule,     formsmodule    ],   declarations: [ app ],   bootstrap: [ app ] }) export class appmodule { }  export class awesome{   name?: string;   otherstuff?: string; } 

don't use index i give value name attribute. i not stable when splicing items array have generate unique id each new added thing (i provided exemple function generate unique id).

the code below works:

//our root app component import { component, ngmodule, version } '@angular/core' import { browsermodule } '@angular/platform-browser' import { formsmodule } "@angular/forms";  @component({     selector: 'my-app',     template: `     <div>     <button (click)="addemptyitem()">+ add new thing</button>       <br />       <br />       <form>         <ng-container *ngfor="let thing of things">           <input [(ngmodel)]="thing.name" name="name-{{thing.id}}" id="name-{{thing.id}}" placeholder="name"/>           <br />           <input [(ngmodel)]="thing.otherstuff" name="other-{{thing.id}}" id="other-{{thing.id}}" placeholder="other" />           <button (click)="removeitem(thing)">remove</button>                     <br />           <br />         </ng-container>       </form>       {{things | json}}     </div>   `, }) export class app {      things: awesome[]     constructor() {         this.things = new array();     }     removeitem(thing): void {         this.things = this.things.filter(th => th.name !== thing.name);     }     addemptyitem(): void {         let newitem = new awesome();         newitem.id = this.guid();         this.things.push(newitem);     }      private guid() {         let uniqueid = math.random().tostring(36).substring(2)             + (new date()).gettime().tostring(36);         return uniqueid;     } }  @ngmodule({     imports: [         browsermodule,         formsmodule     ],     declarations: [app],     bootstrap: [app] })  export class appmodule { }  export class awesome {     id?: string;     name?: string;     otherstuff?: string; }