CODEWITHSUNDEEP
angularpipe
Jan Bürger
Jan Bürger

Reputation: 121

Use pipe on bindLabel at <ng-select>

<ng-select 
    [items]="prozessItem$ | async" 
    [multiple]="true" 
    bindLabel="itemName | umlautsPipe" 
    bindValue="nrItems"
></ng-select>

I want to pipe the itemName from "üäößTEST" to "ueaeoessTest". The async pipe works just fine and without the pipe I get "üäößTEST". Ng-select only accepts a string value in the attribute. I may be misunderstanding it but I believe that when I use bindLabel="itemName | umlautsPipe", ng-select is attempting to reference item[itemName | umlautsPipe] which does not exist.

So how can I transform the name of the item?

Upvotes: 2

Views: 4015

Answers (3)

AliF50
AliF50

Reputation: 18879

It seems like you have to use a template, try:

<ng-select 
    [items]="prozessItem$ | async" 
    [multiple]="true" 
    bindValue="nrItems"
>
  <ng-template ng-option-tmp ng-label-tmp let-item="item">
      {{ item.itemName | umlautsPipe }}
   </ng-template>
</ng-select>

Upvotes: 6

CherryBlossom
CherryBlossom

Reputation: 503

Agreed with @AliF50

but need to use the combination of ng-option-tmp ng-label-tmp if you need to.

<ng-select 
    [items]="prozessItem$ | async" 
    [multiple]="true" 
    bindValue="nrItems"
>
  <ng-template ng-option-tmp ng-label-tmp let-item="item">
      {{ item.itemName | umlautsPipe }}
   </ng-template>
</ng-select>

Upvotes: 1

Paras Patel
Paras Patel

Reputation: 1

use [bindLabel]="name" instead of bindLabel="name". If you use brackets the value name is interpolated.

Upvotes: -1

Related Questions