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
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.