I have an table with a column for the user input. Obviously, the table can have several rows, every row with an input for the user. Under the table I have a button for saving. My question is: if a user type in several inputs, how can I save all the inputs? Example: my table is something like:
row1 -> input (user writes here: "stack")
row2 -> input (user writes here: "overflow")
saveButton
I want to save "stack" and also "overflow". My code is:
<div class="mat-elevation-z8 layout-container">
<table mat-table [dataSource]="dataSourceTable">
<ng-container matColumnDef="userInput">
<th mat-header-cell *matHeaderCellDef [attr.rowspan]="2">Input</th>
<td mat-cell *matCellDef="Input">
<mat-form-field class="full-width">
<input matInput/>
</mat-form-field>
</td>
</ng-container>
</table>
</div>
<button mat-raised-button color="warn" (click)="saveInput()">Save</button>
You can define your cell like this:
<ng-container matColumnDef="userInput">
<th mat-header-cell *matHeaderCellDef [attr.rowspan]="2">Input</th>
<td mat-cell *matCellDef="let Input">
<mat-form-field class="full-width">
<input matInput [(ngModel)]="Input"/>
</mat-form-field>
</td>
</ng-container>
and setup an ngModel on your Input data.