Complex Data Binding In Kendo Auto Complete For Angular 2

Gowtham K
7y
2.9k
0
0

Blog

Introduction

In my previous article we saw how to implement the Kendo auto complete control for Angular 2. To explain how to use the complex data binding in Kendo auto complete for angular 2 we are going to use same application which was created in my previous article, so please go through my previous article before going through this blog.

Complex Data Binding in Kendo Auto Complete for Angular 2

The valueField property used in Kendo autocomplete is to handle the complex data binding.

dropdown-autocomplete.compoenent.html

<h3>Dropdown-AutoComplete</h3>
<kendo-autocomplete
[data]="countryList"
[placeholder]="'e.g. India'"
[valueField]="'text'"
>
<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>

From the above code it is obvious we have used valueField property to bind the text value from the complex array countryList.

dropdown-autocomplete.compoenent.ts

import { Component, OnInit, Inject } from '@angular/core';
import { Jsonp, JsonpModule } from '@angular/http';
import { DataService } from './DataService';
import { Employee } from './employee.model';
@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;}'],
providers: [DataService]
})
export class DropdownAutocompleteComponent implements OnInit {
public countryList : Array<{ text: string, value: string }> = [{ text: "India", value: "IND" }, { text: "China", value: "CHI" }, { text: "Australia", value: "AUS" }]
ngOnInit() {
}
}