How to get Selected Text and Selected Value of an ngSelect dropdown in angular 6

When form is posted, I want to get selected item Name and Value both of an ngSelect dropdown in angular 6.

I have tried getting it with ngModel and with templateVariable, but Selected Name is not returned, I only managed to get Selected Value.

<ng-select
 name="testFunctionID"
 [items]="testFunctions"
 [multiple]="false"
 bindLabel="name"
 bindValue="testFunctionID"
 [(ngModel)]="model.testFunctionID">
</ng-select>

For a list shown in dropdown {Mumbai :1}, {Pune: 2}, {Delhi: 3}, if I select Pune, then I should get "Pune" as well as "2" as output json.

Solution

I've not used that package before, but I was curious based on your question, and I think I have an answer for you.

If you look here https://github.com/ng-select/ng-select it indicates in the API Inputs section that

bindValue - Object property to use for selected model. By default binds to whole object.

So I would guess that if you omit the bindValue property, you will have the entire object rather than just the Id.

Also noticed that there is an event you can hook into

(change) - Fired on model change. Outputs whole model

Question author indicated was not able to get the below to work

so you could do something like this.

<ng-select
 name="testFunctionID"
 [items]="testFunctions"
 [multiple]="false"
 bindLabel="name"
 bindValue="testFunctionID"
 [(ngModel)]="model.testFunctionID"
 (change)="model.testFunctionName = $event.name">
</ng-select>

assuming that you want to set a name property on model as well as the Id.