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.

@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>
  `
})
class AppComponent {
    public listItems: Array<string> = ["Baseball", "Basketball", "Cricket", "Field Hockey", "Football", "Table Tennis", "Tennis", "Volleyball"];

    public value = ['Basketball', 'Cricket']
}

Installation

  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
  3. Once installed, import the DropDownsModule in your application root module:

    import { NgModule } from '@angular/core';
       import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
    
       @NgModule({
           bootstrap: [AppComponent],
           imports: [DropDownsModule]
       })
       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
  • rxjs

The following dependencies will be installed automatically:

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