Devextreme-angular: dxLookup example

[Massaru]

Hi team,

Could you provide example how to use dxLookup. If possible a code similar to attached.

In the attached code I could not work "search" and dxLookup text always shows "[obect object]"

app.component.html: --------------------------

{{item.name}}

app.component.ts code: -----------------------

import { Component } from '@angular/core';

import { DxLookup, DxLookupValueAccessor, DxTemplate } from "devextreme-angular2"

declare var DevExpress: any;
declare var $: any;

export class Hero {
id: number;
name: string;
}

const HEROES: Hero[] = [
{ id: 11, name: 'Mr. Nice' },
{ id: 12, name: 'Narco' },
{ id: 13, name: 'Bombasto' },
{ id: 14, name: 'Celeritas' },
{ id: 15, name: 'Magneta' },
{ id: 16, name: 'RubberMan' },
{ id: 17, name: 'Dynama' },
{ id: 18, name: 'Dr IQ' },
{ id: 19, name: 'Magma' },
{ id: 20, name: 'Tornado' }
];

@Component({
moduleId: module.id,
selector: 'app-root',
templateUrl: 'app.component.html',
directives: [ DxTemplate, DxLookup, DxLookupValueAccessor]
})

export class AppComponent {

public listHeroes: Hero[] = HEROES;

public heroes: any;

private getSource() {
console.log('geting DataSource');

this.heroes = new DevExpress.data.DataSource({
  store: this.listHeroes,
  key: "id",
  searchExpr: "name",
  searchOperation: "contains"
})

}

ngOnInit(): void {

this.getSource();

}

}

---

Thks!

[Massaru]

Ooooops:

The correct code:

app.component.html: --------------------------
<dx-lookup [dataSource]="heroes" [displayExpr]="name"> <div *dxTemplate="let item = data of 'itemTemplate'"> {{item.name}} </div> </dx-lookup>

[Aden-git]

Hello,
 
"displayExpr" property expected a string value, but a square brackets told Angular to evaluate the template expression. Use the following html to fix the issue:

<dx-lookup
    [dataSource]="heroes"
    displayExpr="name"
></dx-lookup>

[Massaru]

Thank Aden, so obvious after resolved.