DevExtreme Angular - Overview
The Lookup is a widget that allows an end user to search for an item in a collection shown in a drop-down menu.
The following code adds the Lookup widget to your page. The simplest configuration requires only a dataSource to be specified. In addition, you can define the placeholder to be displayed when the Lookup input field is empty.
HTML
TypeScript
- <dx-lookup
- [dataSource]="lookupDataSource"
- placeholder="Select a product...">
- </dx-lookup>
- import { DxLookupModule } from "devextreme-angular";
- // ...
- export class AppComponent {
- lookupDataSource = [ "HD Video Player", "SuperHD Video Player", "SuperPlasma 50" ];
- }
- @NgModule({
- imports: [
- // ...
- DxLookupModule
- ],
- // ...
- })
If your data is an array of objects, specify:
- valueExpr
The data field whose value will be written into the value option. - displayExpr
The data field whose value will be displayed within the inner List widget and in the input field of the Lookup.
HTML
TypeScript
- <dx-lookup
- [dataSource]="lookupDataSource"
- valueExpr="id"
- displayExpr="country">
- </dx-lookup>
- import { DxLookupModule } from "devextreme-angular";
- // ...
- export class AppComponent {
- lookupDataSource = [
- { id: 1, country: "Afghanistan" },
- { id: 2, country: "Albania" },
- // ...
- ];
- }
- @NgModule({
- imports: [
- // ...
- DxLookupModule
- ],
- // ...
- })
See Also
- Configure a Widget: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- Lookup - Configure Search Parameters
- Lookup - Enable Grouping
- Lookup - Enable Paging
- Lookup - Customize the Appearance
- Lookup - Handle the Value Change Event
- Lookup API Reference
- Lookup vs SelectBox
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.