Kendo Auto complete in Angular

Introduction

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 AutoComplete 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 Project

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

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 { }

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

<kendo-autocomplete [(ngModel)]="selectedCountry"
  [placeholder]="'Type a country...'" 
    [data]="listItems" 
    [suggest]="true" 
    [filterable]="true"
    (filterChange)="handleFilter($event)"
    >
  </kendo-autocomplete>

Here, data is the array of options that will be displayed in the autocomplete dropdown and selectedCountry is a variable to store the selected value.

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 OnInit {
  listItems: any[];
  data: string[] = [
    'Argentina',
    'Brazil',
    'Canada',
    'Denmark',
    'Egypt',
    'France',
  ];
  selectedCountry: string;

  ngOnInit(): void {
    this.listItems = this.data;
  }

  handleFilter(value: string) {
    //console.log("handleFilter", value);
    this.listItems = this.data.filter(
      (s: any) => s.toLowerCase().indexOf(value.toLowerCase()) !== -1
    );
  }
}

Customize the Autocomplete component (optional). You can customize the appearance and behavior of the autocomplete 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

Summary

That's it! You should now have a functional Kendo UI autocomplete component in your Angular application. Feel free to modify the code according to your specific requirements.