Angular 5 onchange input text field in mat-table - angular5

Question

component file
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 :: -->> "+JSON.stringify(statusValue));
}
}
and HTML file
<mat-table #table [dataSource]="dataSource">
<ng-container matColumnDef="ques">
<mat-cell *matCellDef="let element"> <label> {{element.ques}} </label> </mat-cell>
</ng-container>
<ng-container matColumnDef="unit">
<mat-cell *matCellDef="let element; let index=index">
<mat-form-field>
<input type="text" matInput #item name="{{'metricsInput'+index}}"
[(ngModel)]="userInput.name" (change)="userMetrics(item.value)">
<!-- <input type="text" matInput placeholder="Metric Value"> -->
</mat-form-field> {{element.unit}}
</mat-cell>
</ng-container>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
Input fileds in table
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

Answer 1

Finally, I found the solution
<ng-container matColumnDef="unit">
<mat-cell *matCellDef="let element">
<mat-form-field>
<input type="text" matInput placeholder="User Value"
(input)="userMetrics(element.ques,$event.target.value)">
</mat-form-field> {{element.unit}}
</mat-cell>
</ng-container>