I have implemented the Angular 2 ng2-auto-plete ponent 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 ponent, 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-plete ponent:

<input ng2-auto-plete 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:

I have implemented the Angular 2 ng2-auto-plete ponent 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 ponent, 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-plete ponent:

<input ng2-auto-plete 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:

• javascript
• html
• angular

2 Answers 2

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

<input ng2-auto-plete 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 acplish.

you can try ang2-autoplete the live sample is available at : plnkr.co/edit/5zRD0fcOZHXEMOk4kupY?p=preview