Getting Started with Kendo UI for Angular DropDownList

The DropDownList is a form component that lets you choose a single predefined value from a list.

It is a richer version of the <select> element and supports data binding, filtering, templates, and default items.

Basic Usage

The following example demonstrates the DropDownList in action.

  selector: 'my-app',
  template: `
    <div class="example-wrapper">
      <p>T-shirt size:</p>
      <kendo-dropdownlist [data]="listItems">
class AppComponent {
    public listItems: Array<string> = ["X-Small", "Small", "Medium", "Large", "X-Large", "2X-Large"];

Functionality and Features


The DropDownList provides events which:

Common Usage

The following example demonstrates basic DropDownList events.

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

    selector: 'my-app',
    template: `
    <kendo-dropdownlist [data]="data"
    <event-log title="Event log" [events]="events">

export class AppComponent {
    public events: string[] = [];
    public source: Array<string> = ['Albania', 'Andorra', 'Armenia', 'Austria', 'Azerbaijan'];
    public data: Array<string>;

    constructor() { = this.source.slice();

    public valueChange(value: any): void {
        this.log('valueChange', value);

    public selectionChange(value: any): void {
        this.log('selectionChange', value);

    public filterChange(filter: any): void {
        this.log('filterChange', filter); = this.source.filter((s) => s.toLowerCase().indexOf(filter.toLowerCase()) !== -1);

    public open(): void {

    public close(): void {

    public focus(): void {

    public blur(): void {

    private log(event: string, arg: any): void {`${event} ${arg || ''}`);
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';
import { EventLogComponent } from './event-log.component';

  imports: [
  declarations: [
  bootstrap: [
export class AppModule { }
import { Component, Input } from '@angular/core';

  selector: 'event-log',
  template: `
    <div class="example-config">
      <h5>{{ title }}</h5>
      <ul class="event-log">
        <li *ngFor="let event of events.reverse()">{{ event }}</li>
export class EventLogComponent {
  @Input() title: string;
  @Input() events: string[];
import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

const platform = platformBrowserDynamic();

Looping through Items

By default, you can select a DropDownList item by pressing a keyboard key. For example, if the DropDownList items are Foo, Bar, and Baz and the user presses the B letter key, based on the alphabetical order of the items, the keypress selects the first item which starts with a B.

The keyboard selection is available only if the filtering functionality is disabled.

In this article