All Components

Data Binding

The AutoComplete enables you to bind it to a list of possible values which can contain primitive (strings and numbers) or complex (objects) items.

Binding to Local Data

When binding it to local data, the AutoComplete provides options for:

Arrays of Primitive Data

The following example demonstrates how to bind the AutoComplete to an array of primitive data.

@Component({
  selector: 'my-app',
  template: `
    <div class="example-wrapper">
      <kendo-autocomplete [data]="listItems" [placeholder]="'e.g. Andorra'">
      </kendo-autocomplete>
    </div>
   `
})
class AppComponent {
     public listItems: Array<string> = ["Albania", "Andorra", "Armenia", "Austria", "Azerbaijan"];
}

Arrays of Complex Data

When the component is bound to complex data (objects), define the valueField input. valueField has to point to a property of type string. As a result, the AutoComplete extracts the input from the selected data item and in this way sets the value of the component.

The following example demonstrates how to bind the AutoComplete to an array of complex data.

@Component({
  selector: 'my-app',
  template: `
    <kendo-autocomplete [data]="listItems" [valueField]="'text'" [placeholder]="'e.g. Andorra'">
    </kendo-autocomplete>
   `
})
class AppComponent {
     public listItems: Array<{ text: string, value: string }> = [
         { text: "Albania", value: "Alb" },
         { text: "Andorra", value: "And" },
         { text: "Armenia", value: "Arm" },
         { text: "Austria", value: "Aus" },
         { text: "Azerbaijan", value: "Aze" }
     ];
}

Binding to Remote Data

When binding it to remote data, the AutoComplete provides options for:

Services

The following example demonstrates how to bind the AutoComplete to remote data by using a service.

import { Component, OnInit, Inject } from '@angular/core';

import { DataService } from './data.service';
import { Product } from '../common/product.model';

@Component({
    selector: 'my-app',
    template: `
        <kendo-autocomplete [data]="listItems"
        [valueField]="'ProductName'"
        [placeholder]="'Search Product...'" >
        </kendo-autocomplete>
    `,
    providers: [DataService]
})

export class AppComponent implements OnInit {
    public listItems: Array<Product> = [];

    constructor (@Inject(DataService) private dataService: DataService) {}

    ngOnInit() {
        this.dataService.fetchData().subscribe(
            (data) => this.listItems = data
        );
    }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';

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

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    HttpClientJsonpModule,
    DropDownsModule
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule { }
import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Product } from './product.model';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class DataService {
  constructor(private http: HttpClient) { }

  fetchData(action: string = '', data?: Product): Observable<Product[]> {
    return this.http.jsonp<Product[]>(
      `https://demos.telerik.com/kendo-ui/service/Products/${action}?${this.serializeModels(data)}`,
      'callback'
    );
  }

  private serializeModels(data?: Product): string {
    return data ? `&models=${JSON.stringify([data])}` : '';
  }
}
export class Product {
    constructor(
        public ProductID?: number,
        public ProductName?: string,
        public UnitPrice?: number,
        public UnitsInStock?: number,
        public Discontinued?: boolean
    ) { }
}

Async Pipe

The following example demonstrates how to bind the AutoComplete to an asynchronous source.

import { Component } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { CategoriesService } from './categories.service';

@Component({
  providers: [CategoriesService],
  selector: 'my-app',
  template: `
      <kendo-autocomplete
          [data]="view | async"
          [valueField]="'CategoryName'"
        >
      </kendo-autocomplete>
  `
})
export class AppComponent {
    constructor(private service: CategoriesService) {
        this.view = service;

        this.service.query();
    }

    private view: Observable<any>;
}

import { Injectable } from '@angular/core';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { BehaviorSubject } from 'rxjs/BehaviorSubject ';
import { map } from 'rxjs/operators/map';

@Injectable()
export class CategoriesService extends BehaviorSubject<any> {
    private BASE_URL = 'https://odatasampleservices.azurewebsites.net/V4/Northwind/Northwind.svc/';
    private tableName = 'Categories';

    constructor(private http: HttpClient) {
        super(null);
    }

    public query(): void {
        this.fetch(this.tableName)
            .subscribe(x => super.next(x));
    }

    private fetch(tableName: string): any {
        const queryStr = `$skip=0&$count=true`;
        return this.http
            .get(`${this.BASE_URL}${tableName}?${queryStr}`)
            .pipe(map(response => response['value']));
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';

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

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    HttpClientJsonpModule,
    DropDownsModule
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule { }
import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Streaming of Data

You can also bind the AutoComplete to asynchronous data (observables) by using the async pipe.

The following example demonstrates how to utilize this approach—the demo starts with an empty observable, produces one random value each second, and emits values in batches of five.

import { Observable } from 'rxjs/Observable';
import { interval } from 'rxjs/observable/interval';
import { bufferCount } from 'rxjs/operators/bufferCount';
import { map } from 'rxjs/operators/map';

@Component({
  selector: 'my-app',
  template: `
    <div class="example-config">
        <p>The selected value will disappear when the new data is set.</p>
        <p>New data will be available every 5 seconds (initially the AutoComplete will be empty).</p>
    </div>
    <div class="example-wrapper">
        <p>Start typing "New"</p>
        <kendo-autocomplete [data]="listItems | async"></kendo-autocomplete>
    </div>
  `
})
export class AppComponent {
  public listItems: Observable<string[]>;

  constructor() {
    this.listItems = interval(1000).pipe(
        map((x) =>  "New item " + x),
        bufferCount(5)
    );
  }
}
In this article