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:

  • 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.
  • 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.

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

  • ColorPicker

Basic Usage

The following example demonstrates the MaskedTextBox, NumericTextBox, Slider, and Switch 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>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="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 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 @progress/kendo-angular-intl
  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