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

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

Example

For more details see projects/demo application

1import { NgxMatNumberInputSpinnerModule } from "ngx-mat-number-input-spinner";
2...
3
4@NgModule({
5  imports: [
6    ...,
7    NgxMatNumberInputSpinnerModule,
8  ],
9  ...
10})
11class AppModule { ... }
12

Basic template

1<mat-form-field>
2  
3  <input
4    matInput
5    type="number"
6    step=".5"
7    min="-10"
8    max="10"
9    [ngxMatNumberSpinner]="spinner"
10    [(ngModel)]="myNumberInputValue">
11
12    <ngx-mat-number-spinner #spinner matSuffix></ngx-mat-number-spinner>
13    
14</mat-form-field>

Custom template

1<mat-form-field>
2  
3  <input 
4    matInput 
5    type="number" 
6    min="0" 
7    max="5" 
8    value="0"
9    [ngxMatNumberSpinner]="[spinnerUp,spinnerDown]">
10    
11  <button 
12    mat-icon-button 
13    color="primary" 
14    matPrefix 
15    ngxMatNumberIncrementSpinner
16    #spinnerUp="ngxMatNumberIncrementSpinner">
17    <mat-icon>thumb_up</mat-icon>
18  </button>
19  
20  <button 
21    mat-icon-button 
22    color="warn" 
23    matSuffix 
24    ngxMatNumberDecrementSpinner
25    #spinnerDown="ngxMatNumberDecrementSpinner">
26    <mat-icon>thumb_down</mat-icon>
27  </button>
28  
29</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