title: Set ngModel binding property within ngFor with different name for each property
body: <p>I have an Angular 7 app in which I'd like to have a long list of HTML input components, each sharing similar styles but two-way bind to a different field of a single object in the Typescript file. I thought that this should be achievable with a configuration array and <code>ngFor</code>, similar to this:</p>
  
  <p><strong>app.component.html:</strong></p>
  
  <pre><code>&lt;div *ngFor="let inputConfig of inputConfigs;"&gt;
      &lt;input name="{{inputConfig.id}}" type="number" placeholder="{{inputConfig.description}}"
          [(ngModel)]="inputConfig.bindingField"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>app.component.ts:</strong></p>
  
  <pre><code>export class AppComponent {
  
    public objectToBind = {prop1: 5, prop2: 10, prop3: 30};
    public inputConfigs = [
        { id: "prop1", description: "Property 1", bindingField: this.objectToBind.prop1},
        { id: "prop2", description: "Property 2", bindingField: this.objectToBind.prop2},
        { id: "prop3", description: "Property 3", bindingField: this.objectToBind.prop3}
        // additional fields to follow
    ];
  }
  </code></pre>
  
  <p>The problem with this seems to be that Typescript (or rather, JS) did a copy by value in <code>bindingField: this.objectToBind.prop1</code>, when initiating inputConfigs. The result is that the input component is not actually bound to <code>objectToBind.prop1</code>, but rather to a literal copy of it that nothing references.</p>
  
  <p>Is there a way around this issue where I want to bind to different properties with <code>ngModel</code> under a <code>ngFor</code>? Or do I have no choice but to abandon <code>ngFor</code> and write everything statically in the template? Any help would be greatly appreciated!</p>
  
  <p>Btw, there have been some answers that point to using an index in the <code>ngModel</code> expression, e.g. adding <code>let index = index;</code> in <code>ngFor</code> and using <code>[(ngModel)]="inputConfigs[index].bindingField"</code>. That doesn't seem to help though.</p>