title: Dynamic binding ngModel in ngFor loop
body: <p>I'm trying to create an angular dialog that will dynamically create inputs based on the keys of a given object. My main problem is binding [(ngModel)], in the end it should be something like [(ngModel)]="data.id".</p>
  
  <p><strong>Dialog Box html:</strong> </p>
  
  <pre><code>&lt;h1 mat-dialog-title&gt;Add Customer &lt;/h1&gt;
  &lt;div mat-dialog-content&gt;
  
    &lt;mat-form-field *ngFor="let item of myKeys; let index = index; trackBy:index;" &gt;
      &lt;input matInput
        type="string"
        name={{item}}
        placeholder={{item}}
        [(ngModel)]="data.item"  
        &gt;
    &lt;/mat-form-field&gt;
  
  &lt;/div&gt;
  
  You chose: &lt;i&gt;{{data.name}}&lt;/i&gt;
  
  &lt;div mat-dialog-actions&gt;
    &lt;button mat-button (click)="onNoClick()"&gt;No Thanks&lt;/button&gt;
    &lt;button mat-button [mat-dialog-close]="data" cdkFocusInitial&gt;Ok&lt;/button&gt;
  &lt;/div&gt;e
  </code></pre>
  
  <p><strong>Dialog Box angular component ts:</strong></p>
  
  <pre><code>@Component({
    selector: 'app-dialog-edit',
    templateUrl: './dialog-edit.component.html',
  })
  export class DialogBoxEditComponent {
    test = [
      'data.id',
      'data.name',
      'data.address',
      'data.city',
      'data.payment'
    ];
  
    myKeys = this.getMyKeys(this.data);
  
    @Output() editMode = new EventEmitter();
  
    constructor(
      public dialogRef: MatDialogRef&lt;DialogBoxEditComponent&gt;,
      @Inject(MAT_DIALOG_DATA) public data: any) {}
  
    onNoClick(): void {
      this.dialogRef.close();
    }
    getMyKeys(myData) {
      return Object.keys(myData);
    }
    getType(myIn) {
      return typeof(myIn);
    }
    getty(mytest) {
      return 'data.' + mytest;
    }
  }
  </code></pre>
  
  <p><strong>what I've tried:</strong></p>
  
  <p>[(ngModel)]="data.item"  results in all inputs sharing data.id as the one ngModel</p>
  
  <p>[(ngModel)]="test[index]"  Here I tried creating an array in the component that would return the desired binding, this however fills in the test array value into the input field, but no binding is made</p>
  
  <p>[(ngModel)]="test.item"   Instead of an array, here test is an object. This also results in a singular shared binding link the first example. (see picture below)</p>
  
  <p><a href="https://i.stack.imgur.com/Z4hSx.png" rel="nofollow noreferrer">dialog with shared binding</a></p>
  
  <p>Anything would be appreciated. </p>