user3344978 user3344978 - 3 years ago 662
HTML Question

Angular2 ng2-auto-complete implementation issues

I have implemented the Angular 2

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
as one of the fields. And by following the implementation example of the component, the
is displayed in parenthesis in the dropdown. Is there a way to not display the
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:

enter image description here

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download