ngx-mat-numberpicker

Angular numberpicker component based on Angular Material.

Installation

To install this library (component), run:

Using npm:

$ npm install @retailify/ngx-mat-numberpicker --save

Using yarn:

$ yarn add @retailify/ngx-mat-numberpicker

Consuming this library (component)

You can import this library (component) in any Angular application by running:

Using npm:

$ npm install @retailify/ngx-mat-numberpicker

Using yarn:

$ yarn add @retailify/ngx-mat-numberpicker

and then from your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import this library
import { NumberPickerModule } from '@retailify/ngx-mat-numberpicker';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    
    // Specify this library as an import
    NumberPickerModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once this library is imported, you can use its components, directives and pipes in your Angular application:

<!-- You can now use this library component in app.component.html -->
<h1>
  {{title}}
</h1>
<ngx-mat-numberpicker [min]="1" [max]="6" [default]="1" [starttext]="'Hello World'" [endtext]="'Hello World'" [disabled]="true" (onChange)="onValueChanged($event)"></ngx-mat-numberpicker>

class YourClass {
    currentValue: number = 1;
    
    onValueChanged(value: number): void {
        this.currentValue = value;
    }
}

Component Inputs and Outputs

| Attribute | Type | Required | Description | | :------------- |:-------------| :-----:| :-----| | min | [input] Number | No | The minimal number limit on the number picker. 0 by default | | max | [input] Number | No | The maximum number limit on the number picker. 50 by default | | default | [input] Number | No | The default value for the number picker. 0 by default | | starttext | [input] String | No | The value for the hint starttext of the inputfield. Empty by default | | endtext | [input] String | No | The value for the hint endtext of the inputfield. Empty by default | | disabled | [input] Boolean | No | Defines if the input input field should be disabled / enabled by the user. false by default | | onChange | (output) Number | No | The onChange event of the component. Emits the value of the number picker, every time the user has clicked the - or + button. |

Development

To generate all *.js, *.d.ts and *.metadata.json files:

$ npm run build

To lint all *.ts files:

$ npm run lint

To run demo:

$ npm run playground

License

MIT © Retailify GmbH