All Components

Inputs Overview

The Inputs are fields which allow for an input of data, based on a specific and predefined format.

The package includes the following components:

  • Slider—Lets the user select a value from a predefined range. The values can be increased or decreased over a predefined step by dragging the handle along the track, or by clicking the side arrow buttons. The component supports two modes of display—horizontal and vertical.
  • Switch—Lets the user toggle between checked and unchecked states.
  • MaskedTextBox—Uses a mask to control the input of the user.
  • NumericTextBox—Lets the user edit and submit specific numeric values by typing or by using the spin buttons.

The components below are on the Roadmap and will be included in future versions:

  • ColorPicker

Basic Usage

The following example demonstrates the Slider, Switch, MaskedTextBox and NumericTextBox components in action.

@Component({
    selector: 'my-app',
    template: `
        <div class="example-wrapper">
            <div class="row">
                <div class="col-xs-12 col-sm-6 example-col">
                    <p>Slider</p>
                    <kendo-slider
                        [min]="min"
                        [max]="max"
                        [smallStep]="smallStep"
                        [(ngModel)] = "sliderValue"
                    ></kendo-slider>
                </div>
                <div class="col-xs-12 col-sm-6 example-col">
                    <p>Switch</p>
                    <kendo-switch [(ngModel)]="checked"></kendo-switch>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-6 example-col">
                    <p>MaskedTextBox</p>
                    <kendo-maskedtextbox
                        [(ngModel)]="value"
                        [mask]="'9-000'"
                    ></kendo-maskedtextbox>
                </div>
                <div class="col-xs-12 col-sm-6 example-col">
                    <p>NumericTextBox</p>
                    <kendo-numerictextbox
                        [(ngModel)] = "numericValue"
                    ></kendo-numerictextbox>
                </div>
            </div>
        </div>
    `
})

class AppComponent {
    public sliderValue: number = 5;
    public numericValue: number = 5;
    public min: number = 0;
    public max: number = 10;
    public smallStep: number = 1;
}

Installation

  1. The Inputs package is published on the Progress NPM Registry. To set up your access, follow the steps in Installation.

  2. Download and install the package:

    npm install --save @progress/kendo-angular-inputs
  3. Once installed, import the InputsModule in your application root module:

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { InputsModule } from '@progress/kendo-angular-inputs';
    import { AppComponent } from './app.component';
    
    @NgModule({
       bootstrap:    [AppComponent],
       declarations: [AppComponent],
       imports:      [BrowserModule, InputsModule]
    })
    export class AppModule {
    }

Dependencies

The Inputs package requires the following peer dependencies that have to be installed by your application:

  • @angular/common
  • @angular/core
  • @angular/forms
  • @progress/kendo-angular-intl
  • rxjs

The following dependencies will be installed automatically:

  • @telerik/kendo-draggable
  • @telerik/kendo-inputs-common
In this article