Notify President Madagascar

    stepper-control
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.1 • Public • Published

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

    Install

    npm i stepper-control

    DownloadsWeekly Downloads

    3

    Version

    0.1.1

    License

    ISC

    Unpacked Size

    52.3 kB

    Total Files

    14

    Last publish

    Collaborators

    • wavecoders