Kendo Multiselect Dropdown in Angular

Kendo UI is a popular JavaScript framework that provides a wide range of UI components for web development. One of the components it offers is the Multiselect Dropdown widget, which allows you to implement auto-completion functionality in your web applications.

Prerequisites

• Angular 13
• HTML/Bootstrap

For this article, I have created an Angular project. For creating an Angular project, we need to follow the following steps.

Create a project of Kendo Multiselect

I have created a project using the following command in the Command Prompt.

ng new KendoExample

Open a project in Visual Studio Code using the following commands.

cd KendoExample
Code .

Now in Visual Studio, your project looks as below.

Install the required packages. Make sure you have the necessary packages installed. You will need @progress/kendo-angular-dropdowns and @progress/kendo-angular-l10n.

npm install --save @progress/kendo-angular-dropdowns @progress/kendo-angular-l10n

JavaScript

Import the required modules. In your Angular module file (e.g., app.module.ts), import the necessary modules.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

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

import { DropDownListModule } from '@progress/kendo-angular-dropdowns';

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

JavaScript

Use the Mutliselect  Dropdown component in your component template. In your component's template file (e.g., app.component.html), use the kendo-multiselect component.

<div class="example-wrapper">
        <kendo-multiselect
                #list
                [data]="data"
                [filterable]="true"
                textField="text"
                valueField="value"
                placeholder="T-shirt size"
            >
        </kendo-multiselect>
    </div>

Here, data is the array of options that will be displayed in the Mutliselect dropdown.

Set up the data source in your component. In your component file (e.g., app.component.ts), define the data source array, and initialize it.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
    @ViewChild('list') list;

    public source: Array<{ text: string, value: number }> = [
        { text: 'Small', value: 1 },
        { text: 'Medium', value: 2 },
        { text: 'Large1', value: 3 },
        { text: 'Large2', value: 4 },
        { text: 'Large3', value: 5 },
        { text: 'Large4', value: 6 },
        { text: 'Large5', value: 7 },
        { text: 'Large6', value: 8 }
    ];

    public data: Array<{ text: string, value: number }>;

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

    ngAfterViewInit() {
      const contains = value => s => s.text.toLowerCase().indexOf(value.toLowerCase()) !== -1;

      this.list.filterChange.asObservable().pipe(
            switchMap(value => from([this.source]).pipe(
                tap(() => this.list.loading = true),

                map((data) => data.filter(contains(value)))
            ))
        )
        .subscribe(x => {
            this.data = x;
        });
    }
}

Customize the Mutliselect  Dropdown component (optional). You can customize the appearance and behavior of the Mutliselect  Dropdown component by using various input properties. For example, you can set the minimum length of the input before triggering suggestions, enable/disable filtering, and more. Refer to the Kendo UI documentation for the available options.

Now run the app using the following command.

ng serve