NgxMatNumberInputSpinner

Number Spinner component for Angular Material

StackBlitz Demo

Features

• Replace default browser spinner
• Custom buttons (prefix/suffix) for increment and decrement value
• Read step, min, max, readonly and disabled properties from input element

Installation

npm -i ngx-mat-number-input-spinner

Example

For more details see projects/demo application

import { NgxMatNumberInputSpinnerModule } from "ngx-mat-number-input-spinner";
...

@NgModule({
  imports: [
    ...,
    NgxMatNumberInputSpinnerModule,
  ],
  ...
})
class AppModule { ... }

Basic template

<mat-form-field>
  
  <input
    matInput
    type="number"
    step=".5"
    min="-10"
    max="10"
    [ngxMatNumberSpinner]="spinner"
    [(ngModel)]="myNumberInputValue">

    <ngx-mat-number-spinner #spinner matSuffix></ngx-mat-number-spinner>
    
</mat-form-field>

Custom template

<mat-form-field>
  
  <input 
    matInput 
    type="number" 
    min="0" 
    max="5" 
    value="0"
    [ngxMatNumberSpinner]="[spinnerUp,spinnerDown]">
    
  <button 
    mat-icon-button 
    color="primary" 
    matPrefix 
    ngxMatNumberIncrementSpinner
    #spinnerUp="ngxMatNumberIncrementSpinner">
    <mat-icon>thumb_up</mat-icon>
  </button>
  
  <button 
    mat-icon-button 
    color="warn" 
    matSuffix 
    ngxMatNumberDecrementSpinner
    #spinnerDown="ngxMatNumberDecrementSpinner">
    <mat-icon>thumb_down</mat-icon>
  </button>
  
</mat-form-field>

Components

• ngx-mat-number-spinner

| @Input | Type | Default | Description | | ------ | ---- | ------- | ----------- | | autoDelay | number | 500 | Delay timeout in milliseconds | | autoRepeat | number | 25 | Repeat interval in milliseconds |

Exported as ngxMatNumberSpinner

Directives

• input[ngxMatNumberSpinner]

| @Input | Description | | ------ | ----------- | | ngxMatNumberSpinner | Reference to ngx-mat-number-spinner or list of references to ngxMatNumberIncrementSpinner and ngxMatNumberDecrementSpinner |

Exported as ngxMatNumberSpinnerInput

• ngxMatNumberIncrementSpinner

| @Input | Type | Default | Description | | ------ | ---- | ------- | ----------- | | ngxMatNumberIncrementSpinnerAutoDelay | number | 500 | Delay timeout in milliseconds | | ngxMatNumberIncrementSpinnerAutoRepeat | number | 25 | Repeat interval in milliseconds |

Exported as ngxMatNumberIncrementSpinner

• ngxMatNumberDecrementSpinnerFor

| @Input | Type | Default | Description | | ------ | ---- | ------- | ----------- | | ngxMatNumberDecrementSpinnerAutoDelay | number | 500 | Delay timeout in milliseconds | | ngxMatNumberDecrementSpinnerAutoRepeat | number | 25 | Repeat interval in milliseconds |

Exported as ngxMatNumberDecrementSpinner