All Components

DropDowns Overview

The DropDowns allow you to choose from a predefined list of options.

The package includes the following components:

  • AutoComplete—Displays a list of suggestions depending on the typed text.
  • ComboBox—Displays a list of predefined options. It allows the user to pick a single value from that list or to enter a custom value through a keyboard input.
  • DropDownList—Displays a list of predefined options and allows the user to pick a single value from that list.
  • MultiSelect—Displays a list of options and allows multiple selections from this list.

Basic Usage

The following example demonstrates the AutoComplete, ComboBox, DropDownList, and MultiSelect components in action.

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <div class="example-wrapper" style="min-height: 400px;">
      <div class="col-xs-12 col-sm-6 example-col">
        <p>AutoComplete</p>
        <kendo-autocomplete [data]="listItems" [placeholder]="'Your favorite sport'">
        </kendo-autocomplete>
      </div>

      <div class="col-xs-12 col-sm-6 example-col">
        <p>ComboBox</p>
        <kendo-combobox [data]="listItems" [value]="'Basketball'">
        </kendo-combobox>
      </div>

      <div class="col-xs-12 col-sm-6 example-col">
        <p>DropDownList</p>
        <kendo-dropdownlist [data]="listItems" [value]="'Basketball'">
        </kendo-dropdownlist>
      </div>

      <div class="col-xs-12 col-sm-6 example-col">
        <p>MultiSelect</p>
        <kendo-multiselect [data]="listItems" [value]="value" [placeholder]="'Your favorite sports'"></kendo-multiselect>
      </div>
    </div>
  `
})
export class AppComponent {
    public listItems: Array<string> = ["Baseball", "Basketball", "Cricket", "Field Hockey", "Football", "Table Tennis", "Tennis", "Volleyball"];

    public value = ['Basketball', 'Cricket']
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpModule, JsonpModule } from '@angular/http';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';

import { AppComponent }   from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpModule,
    JsonpModule,
    DropDownsModule
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule { }
import { AppModule } from './ng.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Installation

All components referenced during the installation will be present in the final bundle of your application. To avoid ending up with components you do not actually need, you can either import all DropDowns components at once by using the DropDownsModule or import a specific DropDowns component by importing it as an individual NgModule.

  1. The DropDowns 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-dropdowns @progress/kendo-angular-l10n
  3. Once the DropDowns package is installed, you can import the DropDownsModule in your application root module:

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

    The package also exports the following modules for individual components:

    • AutoCompleteModule
    • ComboBoxModule
    • DropDownListModule
    • MultiSelectModule

    To reduce the size of your application, include only the ones you need:

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    import { AppComponent } from './app.component';
    
    // Imports the AutoComplete module
    import { AutoCompleteModule } from '@progress/kendo-angular-dropdowns';
    
    // Imports the ComboBox module
    import { ComboBoxModule } from '@progress/kendo-angular-dropdowns';
    
    @NgModule({
       bootstrap: [AppComponent],
       imports:   [
           BrowserModule, BrowserAnimationsModule,
           AutoCompleteModule, ComboBoxModule
       ]
    })
    export class AppModule {}

Dependencies

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

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

The following dependencies will be installed automatically:

  • @progress/kendo-angular-popup
  • @telerik/kendo-dropdowns-common
In this article