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

Kacper Kapela picture Kacper Kapela · Jul 19, 2018 · Viewed 19.2k times · Source

I want to have ng-select with two values in 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?

Answer

michal.jakubeczy picture michal.jakubeczy · Jun 10, 2019

It is possible to display it via a custom label and item template:

<ng-select [items]="users" bindLabel="firstName"> 

  <ng-template ng-label-tmp let-item="item">
      <span >{{ item.firstName + ' ' + item.lastName }}</span>
  </ng-template>
  <ng-template ng-option-tmp let-item="item" let-search="searchTerm" let-index="index">
        <span >{{ item.firstName + ' ' + item.lastName }}</span>
  </ng-template>

</ng-select>