title: Bind values of matInput to the array its created from
body: <p>I'm setting up a list view of properties from an existing array of items which have variables that will be shown on the page with input-textboxes. Now I want to update the variables of the objects with the value inside the input-textboxes.</p>
  
  <p>To be more precise: I have an object called monitoring which has a list of pattern objects. These pattern objects have variables which will be listed in the view with input-textboxes where we can change the values. If the values in the input-boxes are changed, I want to update the corresponding pattern objects' variables with these values.</p>
  
  <p>The html looks like this:</p>
  
  <pre><code>  &lt;mat-card-content&gt;
      &lt;mat-list&gt;
        &lt;div *ngFor="let pattern of monitoring?.patterns" class="pattern-instance-item"&gt;
          &lt;mat-list-item&gt;
            &lt;div class="pattern-name"&gt;
              Name: {{pattern.name}}
            &lt;/div&gt;
            &lt;mat-form-field *ngFor="let variable of pattern.variables" class="example-full-width"&gt;
              &lt;input matInput [placeholder]="variable.key" [value]="variable.value"&gt;
            &lt;/mat-form-field&gt;
            &lt;button mat-button (click)="deletePatternInstance(pattern, variable)"&gt;
               &lt;mat-icon&gt;delete&lt;/mat-icon&gt;
            &lt;/button&gt;
            &lt;button mat-button (click)="updateMonitoringArea(pattern, variable)"&gt;
              &lt;mat-icon&gt;update&lt;/mat-icon&gt;
            &lt;/button&gt;
          &lt;/mat-list-item&gt;
          &lt;mat-divider&gt;&lt;/mat-divider&gt;
        &lt;/div&gt;
      &lt;/mat-list&gt;
    &lt;/mat-card-content&gt;
  </code></pre>
  
  <p>I have a backend server based on spring where the monitoring objects should have the patterns with the variable values that are specified in the frontend.</p>