Angular 5 ng-select how to add two values to 'bindLabel'?
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>
<ng-select [items]="users" bindLabel="firstName">
<ng-template ng-label-tmp let-item="item" let-clear="clear">
<span class="ng-value-label">{{item.firstName + ' ' + item.lastName}}</span>
<span class="ng-value-icon right" (click)="clear(item)">×</span>
</ng-template>
</ng-select>
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; });