title: How to bind array of inputs to model in Angular
body: <p>Could somebody help me with the following code and give me a reason why it does not work. I am creating a series of inputs from a string array and I want to bind each input value to its corresponding slot in the string array. Seems to be pretty standard, but I do not seem to grasp the issue.</p>
  
  <p>I have tried the following two cases, but the Colors array (=string[]) remains empty!</p>
  
  <pre><code>&lt;tr *ngFor="let color of Colors; let i = index;"&gt;
   &lt;td&gt;
    &lt;mat-form-field&gt;
        &lt;input required matInput placeholder="Color ({{ i + 1}})"   [name]="'color_' + i" [(ngModel)]="color"&gt;
    &lt;/mat-form-field&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr *ngFor="let color of Colors; let i = index;"&gt;
   &lt;td&gt;
    &lt;mat-form-field&gt;
     &lt;input required matInput placeholder="Color ({{ i + 1}})"  [name]="'color_' + i" [(ngModel)]="Colors[i]"&gt;
    &lt;/mat-form-field&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>