Angular2 -- Two-way bound text input blurring after each keyup when using NgFor
<p>So in an Angular2 app I have a string array called 'recipe.ingredients', and I have a form set up to allow you to edit the ingredients, with buttons to add and remove text fields (and items in the array).</p>

<pre><code>    &lt;ul class="list-unstyled"&gt;
      &lt;div class="row" *ngFor="let ingredient of recipe.ingredients; let i=index"&gt;
        &lt;li&gt;
          &lt;div class="col-xs-4"&gt;
            &lt;input
              size="20"
              type="text"
              class="form-control"
              [ngModel]="recipe.ingredients[i]"
              #t
              (blur)="recipe.ingredients[i]=t.value"
              required&gt;
          &lt;/div&gt;
          &lt;div class="btn-group col-xs-2" role="group"&gt;
            &lt;button
              type="button"
              class="btn btn-default btn-xs"
              (click)="recipe.ingredients.splice(i,1)"&gt;-&lt;/button&gt;
            &lt;button
              type="button"
              class="btn btn-default btn-xs"
              (click)="recipe.ingredients.splice(i+1,0,'')"&gt;+&lt;/button&gt;
          &lt;/div&gt;
        &lt;/li&gt;
      &lt;/div&gt;
    &lt;/ul&gt;
</code></pre>

<p>You'll notice that I haven't done two way binding to recipe.ingredients[i] with [(ngModel)], and that's because I tried that and every time you typed a character, the text box would lose focus.  I assume it has something to do with *ngFor stepping over the array.  Anyways, for the time being this workaround was fine, but now I am adding some functionality and I need two way databinding to work.  Any idea how I can refactor this to get that to work?</p>