All Components

Value Binding

The selected value of the AutoComplete can only be a string value.

To set the value, use the [value] property binding of the AutoComplete or the 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