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.

Basic Usage

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

@Component({
    selector: 'my-app',
    template: `
        <kendo-slider
            [min]="min"
            [max]="max"
            [smallStep]="smallStep"
            [(ngModel)] = "value"
        ></kendo-slider>

        <kendo-switch [(ngModel)]="checked"></kendo-switch>
    `
})

class AppComponent {
    public value: 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
  • rxjs

The following dependencies will be installed automatically:

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