All Components

Value Binding

When defining its selected value, the AutoComplete accepts only values of type string.

To set the value of the component, use its [value] property binding or ngModel binding. When the value changes, the AutoComplete triggers the valueChange event.

  • To define multiple values, use the MultiSelect. For more information, refer to its overview article.
  • To define selected values as data of the primitive (strings and numbers) or complex (objects) type, use the ComboBox. For more information, refer to its overview article.

The following example demonstrates how to select an item in the AutoComplete.

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

     public country: string = "Austria";
}
In this article