title: Angular 5 onchange input text field in mat-table
body: <p>component file</p>
  
  <pre><code>export interface Assess {
    ques: string;
    unit: string;
  }
  const DATA: Assess[] = [
    { ques: 'Release  volume', unit: '' },
    { ques: 'Sprint Cycle ',  unit: 'week(s)' },
    { ques: 'No. of stories', unit: '/spr'  }
  ];
  
  export class AssessComponent implements OnInit {
    /** display questions */
    displayedColumns: string[] = ['ques', 'unit'];
    dataSource = new MatTableDataSource(DATA);
  
    userMetrics(statusValue: any): void {
      console.log("***  NEW VALUE :: --&gt;&gt;   "+JSON.stringify(statusValue));
    }
  }
  </code></pre>
  
  <p>and HTML file</p>
  
  <pre><code>&lt;mat-table #table [dataSource]="dataSource"&gt;
    &lt;ng-container matColumnDef="ques"&gt;
      &lt;mat-cell *matCellDef="let element"&gt; &lt;label&gt; {{element.ques}} &lt;/label&gt; &lt;/mat-cell&gt;
    &lt;/ng-container&gt;
    &lt;ng-container matColumnDef="unit"&gt;
      &lt;mat-cell *matCellDef="let element; let index=index"&gt;
        &lt;mat-form-field&gt;
          &lt;input type="text" matInput #item  name="{{'metricsInput'+index}}" 
              [(ngModel)]="userInput.name" (change)="userMetrics(item.value)"&gt;
          &lt;!-- &lt;input type="text" matInput placeholder="Metric Value"&gt; --&gt;
         &lt;/mat-form-field&gt; {{element.unit}}
      &lt;/mat-cell&gt;
    &lt;/ng-container&gt;
    &lt;mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/mat-row&gt;
  &lt;/mat-table&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/gjs6A.png" rel="nofollow noreferrer">Input fileds in table</a></p>
  
  <p>Onchange when the user enters the new value to textbox, 
  question selected and answer provided from each mat-cell of the table should be shown in console in the function userMetrics()
  Please help me since I'm new to Angular</p>