1

I'm working on the frontend of a web app using Angular. I would like to create a table in which I can insert numbers. So this is my code (just for one column):

<mat-table [dataSource]="dataSource">
    <ng-container matColumnDef="1">
          <mat-header-cell *matHeaderCellDef>1</mat-header-cell>
          <mat-cell *matCellDef="let element">
            <mat-form-field appearance="fill" class="p-1rem">
              <input matInput autocomplete="off" type="number" [ngModel]="element.day1?.workMinutes" (ngModelChange)="saveChanges(1, element, $event)"/>
            </mat-form-field>
          </mat-cell>
     </ng-container>
    <mat-header-row *matHeaderRowDef="monthDisplayedColumns; sticky: true"></mat-header-row>
    <mat-row *matRowDef="let row; columns: monthDisplayedColumns;"></mat-row>
 </mat-table>

However, even if I've added type="number" in the input tag, it doesn't display the two small "arrows" on the right, that allow me to increase/decrease the chosen number: it seems like I've added type="text". Do you have any suggestion? Thanks a lot!

lucia
  • 29
  • 5
  • @lucia please the link in answer section . I think you should check with `[value]="element.day1?.workMinutes" [(ngModel)]="element.day1?.workMinutes"`. – Srijon Chakraborty Jan 22 '21 at 09:34
  • https://stackoverflow.com/a/76057341/588759 – rofrol Apr 19 '23 at 17:34
  • Does this answer your question? [Input number in Angular Material Design?](https://stackoverflow.com/questions/45487647/input-number-in-angular-material-design) – rofrol Apr 19 '23 at 17:34

1 Answers1

0

I think, I have a solution for you. Your Input should be like <input matInput placeholder="days" type="number" [value]="element.day1?.workMinutes" [(ngModel)]="element.day1?.workMinutes" >
Here is a sample similar type code you can find in stackblitz: Link
Please check the link and let me know it works or not.

Srijon Chakraborty
  • 2,007
  • 2
  • 7
  • 20
  • thank you for your comment! I solved the issue by using this https://stackoverflow.com/questions/45487647/input-number-in-angular-material-design – lucia Jan 22 '21 at 12:42