CODEWITHSUNDEEP
angular5
RMR
RMR

Reputation: 21

Angular 5 onchange input text field in mat-table

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

Upvotes: 0

Views: 7822

Answers (1)

RMR
RMR

Reputation: 21

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>

Upvotes: 2

Related Questions