ez-numericbox

Minimalistic design, simple, customizable, and easy-to-use numeric input box component for your Angular 2+ application.

Insatallation

npm install ez-numericbox

Code - app.moduele.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { EzNumericboxModule, EzNumericboxService } from 'ez-numericbox'
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';

@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
EzNumericboxModule,
FormsModule
],
providers: [EzNumericboxService],
bootstrap: [AppComponent]
})
export class AppModule { }

Code - Markup

<ez-numericbox [min]="25" [max]="35" [reset]="true" [(ngModel)]="myNumValue" (blur)="onBlur($event)">
</ez-numericbox>

Configuration

Minimum Value :

<ez-numericbox [min]="25" [reset]="true" [(ngModel)]="myNumValue" (blur)="onBlur($event)">
</ez-numericbox>

Maximum Value :

<ez-numericbox [max]="35" [reset]="true" [(ngModel)]="myNumValue" (blur)="onBlur($event)">
</ez-numericbox>

Reset Min and Max values:

Resets value to min or max value, when a value is outside the boundary of min and max values respectively.

<ez-numericbox [min]="25" [max]="35" [reset]="true" [(ngModel)]="myNumValue" >
</ez-numericbox>

Blur:

<ez-numericbox (blur)="onBlur($event)">
</ez-numericbox>