Angular 4 and 5 MultiSelect Kendo UI

Angular 4 and 5 MultiSelect Kendo UI

The Kendo MultiSelect is a form component and used to displays a collection/list of options which allows selecting the multiple options from the collection or list. For the detail, you can see the below examples with events and so on.

Components Class -
import { Component } from '@angular/core';

  selector: 'my-app',
  template: `
    <div class="wrapper">
      <p>User List - </p>
      <kendo-multiselect [data]="users" [(ngModel)]="value"></kendo-multiselect>
    <div class="config">
         Selected Users - {{value | json}}
export class AppComponent {
    public users: Array<string> = ['Anil Singh', 'Sunil Singh', 'Sushil SIngh', 'Aradhya', 'Reena Singh', 'Temp 1', 'Temp 2', 'Temp 3'];
    public value: any = ['Anil Singh']

App Module -
import { NgModule }      from '@angular/core';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';

import 'hammerjs';

import { AppComponent }   from './app.component';

  imports:      [ FormsModule, BrowserModule, BrowserAnimationsModule, DropDownsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]

export class AppModule { }

MultiSelect Features – The features looks like.
ü  Data binding
ü  Value binding
ü  Templates
ü  Filtering
ü  Accessibility
ü  Forms support
ü  Keyboard navigation
ü  Controlling the state of the options list

MultiSelect Events - The features looks like.
ü  valueChange
ü  filterChange
ü  open
ü  close
ü  focus
ü  blur

//The MultiSelect Events.
 import { Component } from '@angular/core';

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

 export class AppComponent {
     public events: string[] = [];
     public source: Array<string> = ["Anil", "Sunil", "Sushil", "Sushil", "Aradhya","Reena", "Temp 1","Temp 2"];
     public data: Array<string>;

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

     public valueChange(value: any): void {
         this.log("valueChange", 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 || ""}`);

I hope you are enjoying with this post! Please share with you friends!! Thank you!!!

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog -
My Books - Book 1 and Book 2 Powered by Blogger.