[SOLVED] Angular 5 ng-select how to add two values to 'bindLabel'?

Angular 5 ng-select how to add two values to 'bindLabel'?

I want to have ng-select with two values in the property bindLabel.
I have something like this:

<ng-select placeholder="{{'TASKS.FOR_WHO' | translate }}"
           name="users" 
           [items]="users" 
           bindLabel="firstName" >

 </ng-select>

But in bind label I want to have bindLabel= firstName + lastName. Like this:

<ng-select placeholder="{{'TASKS.FOR_WHO' | translate }}"
           name="users" 
           [items]="users"
           bindLabel="firstName + lastName">

 </ng-select>

How to achieve this?

Solution

ng-select only accepts a string value in the attribute. I may be misunderstanding but I believe that if you say bindLabel="firstName+lastName", ng-select is attempting to reference item[firstNamelastName] which does not exist.

I think your best option is to transform the collection. You can add a .map to the end of your array declaration and use bindLabel="fullName" in your template:

[
  {firstName: "John", lastName: "Doe"},
  {firstName: "Jane", lastName: "Doe"}
].map((i) => { i.fullName = i.firstName + ' ' + i.lastName; return i; });