Templates In Kendo AutoComplete For Angular 2

Introduction

Recently, Telerik by Progress has released a RC version of Kendo UI for Angular 2. With this article, I would like to share how to implement Kendo autocomplete for Angular 2 from the recently released Kendo for Angular 2 package.

Please check on the list of kendo UI component for Angular 2

Content

Setup Kendo UI for Angular 2.
Configuring the Kendo auto complete control for Angular 2.
Implementing the template in Kendo auto complete control for Angular 2.

Quick setup of Kendo UI for Angular 2

Before going to the initial setup of the project, just make sure that the latest versions of Node.js and NPM are installed in your system

Step 1

Install Angular-CLI package, open the command prompt and write the command given below to install Angular CLI package

npm install -g angular-cli

Step 2

Go to the respective directory where you need to save your project, and give the command given below in the command prompt to create a project.

ng new kendoangular --style=scss

Kendoangular is our project name.

Step 3

Build the Application, using the command given below.

ng serve

Result in browser

Configuring Kendo auto complete control for angular 2

Step 4

Let’s create a new component. In this article, we are going to see Kendo autocomplete for Angular 2. To use the autocomplete control, first we need to install the Kendo dropdowns module, give the command given below to install the Kendo dropdowns

npm install -S @progress/kendo-angular-dropdowns

Step 5

Create a separate component to organize our Application, use the command given below to install the component.

ng g component dropdown-autocomplete

Check out the figure given below to get the list of the files created to organize our autocomplete component.

The separate dropdown-autocomplete folder is created to maintain out autocomplete component.

Step 5

Open app.module.ts file and add the information of Kendo dropdowns, which are installed.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
import { AppComponent } from './app.component';
import { DropdownAutocompleteComponent } from './dropdown-autocomplete/dropdown-autocomplete.component';
@NgModule({
declarations: [
AppComponent,
DropdownAutocompleteComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
DropDownsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Step 6

Open dropdown-autocomplete.compoenent.html and write the code given below in it

<h3>Dropdown-AutoComplete</h3>
<kendo-autocomplete
[data]="countryList"
[placeholder]="'e.g. India'"
></kendo-autocomplete>

Step 7

Open dropdown-autocomplete.compoenent.ts and write the code given below in it.

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-dropdown-autocomplete',
templateUrl: './dropdown-autocomplete.component.html',
styleUrls: ['./dropdown-autocomplete.component.scss']
})
export class DropdownAutocompleteComponent implements OnInit {
public countryList: Array<string> = [
"India", "China","Australia"]
constructor() { }
ngOnInit() {
}
}

The countrylist array is created, which is used to populate the auto complete control and the selector(app-dropdown-autocomplete) is defined.

Step 8

Open app.component.html file and write the code given below.

<h1>
{{title}}
</h1>
<app-dropdown-autocomplete></app-dropdown-autocomplete>

App.componenent.html is the main page, which is used to display the control based on the selector.

Step 9

Configure the theme

Open the style.scss and write the code given below in it

@import "~@progress/kendo-theme-default/scss/all";

The code given above is used to integrate Kendo's default theme into our Application.

Step 10

Build the application

Give the command given below to build the Application.

ng serve

Result in the Browser

Template in Kendo auto complete for angular 2

Header Template

Implementing the header template is much simpler, as we just need to include the <template> tag with KendoAutoCompleteHeaderTemplate Directive inside a <kendo-autocomplete> tag.

Write the code given below in dropdown-autocomplete.compoenent.html

<h3>Dropdown-AutoComplete</h3>
<kendo-autocomplete
[data]="countryList"
[placeholder]="'e.g. India'"
>
<template kendoAutoCompleteHeaderTemplate>
<h4>Countries</h4>
</template>
</kendo-autocomplete>

Result in the Browser

Footer Template

Include the <template> tag with KendoAutoCompleteHeaderTemplate Directive inside a <kendo-autocomplete> tag

Write the code given below in dropdown-autocomplete.compoenent.html.

<h3>Dropdown-AutoComplete</h3>
<kendo-autocomplete
[data]="countryList"
[placeholder]="'e.g. India'"
>
<template kendoAutoCompleteHeaderTemplate>
<h4>Countries</h4>
</template>
<template kendoAutoCompleteFooterTemplate>
<h4>Total: {{countryList.length}} countries</h4>
</template>
</kendo-autocomplete>

Result in the Browser

No-Data Template

Include the <template> tag with KendoDropDownListNoDataTemplate Directive inside a <kendo-autocomplete> tag

Write the code given below in dropdown-autocomplete.compoenent.html

<h3>Dropdown-AutoComplete</h3>
<kendo-autocomplete
[data]="countryList"
[placeholder]="'e.g. India'"
>
<template kendoAutoCompleteHeaderTemplate>
<h4>Countries</h4>
</template>
<template kendoAutoCompleteFooterTemplate>
<h4>Total: {{countryList.length}} countries</h4>
</template>
<template kendoDropDownListNoDataTemplate>
<h4><span class="k-icon k-i-warning"></span><br /><br /> No data here</h4>
</template>
</kendo-autocomplete>

dropdown-autocomplete.compoenent.ts

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-dropdown-autocomplete',
templateUrl: './dropdown-autocomplete.component.html',
styleUrls: ['./dropdown-autocomplete.component.scss'],
styles: ['.k-i-warning { font-size: 2.5em; } h4 { font-size: 1em;}'],
})
export class DropdownAutocompleteComponent implements OnInit {
public countryList: Array<string> = []
constructor() { }
ngOnInit() {
}
}

Result in the Browser

I hope you have enjoyed this article. Your valuable feedback, questions or comments about this article are always welcome.