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

Demos

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

@Component({
  selector: 'my-app',
  template: `
    <p>ComboBox</p>
    <kendo-combobox [data]="listItems" [value]="'Item 2'">
    </kendo-combobox>

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

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