All Components

DropDowns Overview

The DropDowns are form components that allow you to choose from a predefined list of options.

The package includes the following components:

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

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

  • AutoComplete
  • MultiSelect


The following example demonstrates the basic usage of the ComboBox and DropDownList components.

  selector: 'my-app',
  template: `
    <kendo-combobox [data]="listItems" [value]="'Item 2'">

    <kendo-dropdownlist [data]="listItems" [value]="'Item 2'">
class AppComponent {
    public listItems: Array<string> = ["Item 1", "Item 2", "Item 3", "Item 4"];


  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';
         bootstrap: [AppComponent],
         imports: [DropDownsModule]
     export class AppModule {}


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