Angular2 ng2-auto-complete implementation issues

angular, html, javascript

Solution

You need to set `value-property-name` attribute to `null`:

<input ng2-auto-complete id="inputEvent" class="form-control"
[(ngModel)]="model" ngModel name="event" #event="ngModel"
[source]="items" value-property-name=null
display-property-name="name" (valueChanged)="onSelect($event)"/>

`value-property-name` is optional attribute, but it has default value - `id`. Setting it to `null` won't display anything, which is what you are looking to accomplish.

Problem

I have implemented the Angular 2 `ng2-auto-complete` component by following this example. You can access it from here also. The issue I'm facing is, my source is in the form of an object with `id` as one of the fields. And by following the implementation example of the component, the `id` is displayed in parenthesis in the dropdown. Is there a way to not display the `id` in the dropdown? Here is my HTML code for the auto-complete component: ``` <input ng2-auto-complete id="inputEvent" class="form-control" [(ngModel)]="model" ngModel name="event" #event="ngModel" [source]="items" display-property-name="name" (valueChanged)="onSelect($event)"/> ``` This is what I get:

Original source