1

Does Angular Material have a number spinner? I tried this demo from this question:


<mat-form-field>
    <input
      type="number"
      class="form-control"
      matInput
      name="value"
      placeholder="Slab"
      formControlName="value">
  </mat-form-field>

But it does not render. I was going to create a Stackblitz, but it does not work with Angular 12.

Thoughts?

Ole
  • 41,793
  • 59
  • 191
  • 359
  • 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
  • Someone mentioned this might be good too ... https://stackoverflow.com/questions/45487647/input-number-in-angular-material-design – Ole Apr 19 '23 at 17:41
  • 1
    I mean this link https://stackoverflow.com/questions/45487647/input-number-in-angular-material-design/76057341#76057341 – rofrol Apr 19 '23 at 17:56

2 Answers2

3

it's only work with .css. You enclose two button mat-icon-button inside a wrapper div matSuffix

An example (disclammer, really I'm not very good in css, pretty sure there're better ways to get the same

.wrapper-indicator{
  position:relative;
  height:1.5rem;
  width:1.5rem;
  overflow:none;
}
.wrapper-indicator .up,.wrapper-indicator .down{
  position:absolute;
  right: 0;
  font-size:.5em;
  height: 1.25rem!important;
  width: 1.25rem!important;
}
.wrapper-indicator .up{
  top:-.25rem;
}
.wrapper-indicator .down{
  top:1rem;
}

And use

  <mat-form-field appearance="fill" floatLabel="always">
    <mat-label>Amount</mat-label>
    <input matInput type="number" class="example-right-align" placeholder="0">
    <div matSuffix class="wrapper-indicator">
      <button class="up" mat-icon-button >
        <mat-icon>expand_less</mat-icon>
      </button>
      <button class="down" mat-icon-button >
        <mat-icon>expand_more</mat-icon>
      </button>
    </div>
  </mat-form-field>

Update mat-input create a spinner directly is you use type="number". strange, when I made the input don't show the "spinner". Taking a look about the code in github, the "type" is a @Input, so imagine that it's necesary write type="number" after matInput almost in old version of Angular

Eliseo
  • 50,109
  • 4
  • 29
  • 67
  • Hmmm ... I was thinking about using a slider instead ... and when looking at the demo ... they have the number spinner rendered in the dialog demoing the slider ...https://material.angular.io/components/slider/examples – Ole Jun 17 '21 at 21:52
  • @Ole, really "strange", I try to get an explanation and write as update but really I'm not pretty sure that this was the cause (futhermore, I just a stackblitz and also work if you put `type="number"` before :( – Eliseo Jun 18 '21 at 06:38
  • The up and down arrows in a number-type input are rendered by Chromium based browsers. You won't see them if you use, for example, Firefox (at this time, v108) or Opera. – villecoder Dec 19 '22 at 19:16
0

This works now. I'm not sure exactly what I changed ...:


<mat-form-field>
    <input
      type="number"
      class="form-control"
      matInput
      min="1" 
      max="5"
      name="value"
      placeholder="Select a Number Between 1 and 5"
      formControlName="value">
  </mat-form-field>
Ole
  • 41,793
  • 59
  • 191
  • 359