Components / Dropdowns / ComboBox

Getting Started with Kendo UI for Angular ComboBox

The ComboBox is a form component that lets you choose from a list of options.

It is a richer version of the <select> element and supports data binding, filtering, templates, and the entering of custom values.

Basic Usage

The following example demonstrates the ComboBox in action.

@Component({
  selector: 'my-app',
  template: `
    <div class="example-config">
      <input id="ac" type="checkbox" [(ngModel)]="allowCustom">
      <label for="ac">Allow custom values</label>
    </div>
    <div class="example-wrapper">
    <p>Favorite sport:</p>
    <kendo-combobox [data]="listItems" [allowCustom]="allowCustom">
    </kendo-combobox>
    </div>
  `
})
class AppComponent {
    public allowCustom: boolean = true;
    public listItems: Array<string> = ["Baseball", "Basketball", "Cricket", "Field Hockey", "Football", "Table Tennis", "Tennis", "Volleyball"];
}

Functionality and Features

Events

The following example demonstrates basic ComboBox events.

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

@Component({
    selector: 'my-app',
    template: `
    <kendo-combobox [data]="data"
      [filterable]="true"
      (valueChange)="valueChange($event)"
      (selectionChange)="selectionChange($event)"
      (filterChange)="filterChange($event)"
      (open)="open()"
      (close)="close()"
      (focus)="focus()"
      (blur)="blur()"
    >
    </kendo-combobox>
    <event-log title="Event log" [events]="events">
    </event-log>
  `
})

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

    constructor() {
        this.data = 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.data = this.source.filter((s) => s.toLowerCase().indexOf(filter.toLowerCase()) !== -1);
    }

    public open(): void {
        this.log('open');
    }

    public close(): void {
        this.log('close');
    }

    public focus(): void {
        this.log('focus');
    }

    public blur(): void {
        this.log('blur');
    }

    private log(event: string, arg: any): void {
        this.events.push(`${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';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    DropDownsModule
  ],
  declarations: [
    AppComponent,
    EventLogComponent
  ],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule { }

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

@Component({
  selector: 'event-log',
  template: `
    <div class="example-config">
      <h5>{{ title }}</h5>
      <ul class="event-log">
        <li *ngFor="let event of events.reverse()">{{ event }}</li>
      </ul>
    </div>
  `
})
export class EventLogComponent {
  @Input() title: string;
  @Input() events: string[];
}

import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

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

In this article