stepper-control

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
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)
  }