Stepper Control

This Angular Module (Component) allows you to have a control (+ -) for incresing or decreasing value control.

You can use the component as a formControl or respond to change event

Installation

npm install stepper-control

Scaffolding

Import the module into your project under imports

imports: [
    BrowserModule,
    AppRoutingModule,
    StepperModule
  ],

Use

To use in your component, use the following tag for a basic setup

<wav-stepper-control></wav-stepper-control>

Here is the component with all input controls

<wav-stepper-control 
  formControlName="account" 
  [vertical]="true" 
  [padding]="3" 
  [incrementBy]=".5"
  [min]="10" 
  [max]="20" 
  (change)="onStepChange($event)"
></wav-stepper-control>

Inputs

The following Inputs are available

| Input | Type | Defaut | Description | | ----- | ---- | ------ | ----------- | | vertical | BOOLEN | FALSE | controls the display type (vertical | horizontal) | | padding | NUMBER | 0 | pads the resulting value | | incrementBy | NUMBER | 1 | increment value by | | min | NUMBER | NULL | min value | | max | NUMBER | NULL | max value |

Outputs

The following Inputs are available

| Event | Type | Description | | ----- | ---- | ------ | | change | STRING | current value padded |

Form Control setup

define a formGroup control

stepper = this.fb.group({
  value: [10]
})

then onInit() specify the form change event

this.stepper.get('value')?.valueChanges.subscribe(data => {
  console.log('VALUE:', data)
})

Then implement the component

<div [formGroup]="privateForm">
  <wav-stepper-control 
    formControlName="value" 
    [min]="10" 
    [max]="20" 
  ></wav-stepper-control>
</div>

Change Event setup

Then implement the component

<div [formGroup]="privateForm">
  <wav-stepper-control 
    [min]="10" 
    [max]="20" 
    (change)="onStepChange($event)"
  ></wav-stepper-control>
</div>

then create the function to catch the reponse to the change

 onStepChange(data: string) {
    console.log(data)
  }