Components / Dropdowns / MultiSelect

Getting Started with Kendo UI for Angular MultiSelect

The MultiSelect is a form component that displays a list of options and allows for multiple selections from this list.

It is a richer version of the <select> element and supports item and tag templates, and configurable options for controlling the list behavior.

Basic Usage

The following example demonstrates the MultiSelect in action.

@Component({
  selector: 'my-app',
  template: `
    <div class="example-config">
      Current value: {{value | json}}
    </div>
    <div class="example-wrapper">
      <p>Favorite sport:</p>
      <kendo-multiselect [data]="listItems" [(ngModel)]="value"></kendo-multiselect>
    </div>
  `
})
class AppComponent {
    public listItems: Array<string> = ['Baseball', 'Basketball', 'Cricket', 'Field Hockey', 'Football', 'Table Tennis', 'Tennis', 'Volleyball'];
    public value: any = ['Baseball']
}

Functionality and Features

Events

The following example demonstrates basic MultiSelect events.

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

@Component({
    selector: 'my-app',
    template: `
    <kendo-multiselect [data]="data"
      [filterable]="true"
      (valueChange)="valueChange($event)"
      (filterChange)="filterChange($event)"
      (open)="open()"
      (close)="close()"
      (focus)="focus()"
      (blur)="blur()"
    >
    </kendo-multiselect>
    <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 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