user3344978 user3344978 - 1 month ago 77
HTML Question

Angular2 ng2-auto-complete implementation issues

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:

enter image description here

Answer

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.