Numeric inputs without spinners?

Question

I want the user to input a number like 64.32, and two-way-bind this to a property of type number.

I tried

<input type="number" [(ngModel)]="size">

but this shows a spinner, which is pretty useless for entering a fractional number of this magnitude, and takes up space that could be used better.

I also tried

<input [(ngModel)]="size">

but this puts a string into the model property rather than a number.

Currently I am converting between string and number in a setter/getter, but surely there is a better way?

Answer 1

you can use CSS to achieve that.

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}