Angular Autocomplete - Customize Item Appearance

For a minor customization of Autocomplete items, you can define specific fields in item data objects. For example, the following code generates three items: the first is not customized, the second is disabled and the third is hidden.

TypeScript
HTML
  • import { DxAutocompleteModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • autocompleteData = [
  • { text: "James" },
  • { text: "John", disabled: true },
  • { text: "Joseph", visible: false }
  • ]
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxAutocompleteModule
  • ],
  • // ...
  • })
  • <dx-autocomplete
  • [dataSource]="autocompleteData"
  • valueExpr="text"
  • placeholder="Type first name...">
  • </dx-autocomplete>

If you need a more flexible solution, define an itemTemplate.

HTML
TypeScript
  • <dx-autocomplete
  • [dataSource]="autocompleteData"
  • valueExpr="country"
  • placeholder="Type country name..."
  • itemTemplate="full">
  • <div *dxTemplate="let itemObj of 'full'">
  • <p>Country: <b>{{itemObj.country}}</b></p>
  • <p style="color:grey;">Capital: <b>{{itemObj.capital}}</b></p>
  • </div>
  • </dx-autocomplete>
  • import { DxAutocompleteModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • autocompleteData = [
  • { country: "Afghanistan", capital: "Kabul" },
  • { country: "Albania", capital: "Tirana" },
  • // ...
  • ]
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxAutocompleteModule
  • ],
  • // ...
  • })
See Also