Ng Select dropdown with condition

Question

I need to display the purchaseOrderStatusName in a NgSelect dropdown. In API different status values are available such as: OPEN,RECEIVED,CANCELLED.

TS file:

  getAllPurchaseOrders() {
    this.purchaseOrderService.getAllPurchaseOrders().subscribe(
      data => { this.formModel.schema.purchaseOrders['purchaseOrders'] = data; 
    });
  }

Ng-Select Drop Down:

<ng-select [items]=" formModel.schema.purchaseOrders['purchaseOrders']" bindLabel="referenceNumber" 
bindValue="id" placeholder="Select PO" clearAllText="Clear" formControlName="purchaseOrderId">

   <ng-template ng-label-tmp let-item="item">
      <span [ngOptionHighlight]="search">
          {{ item.referenceNumber +'-'+ item.purchaseOrderStatusName}}
     </span>
   </ng-template>
   <ng-template ng-option-tmp let-item="item" let-search="searchTerm" let-index="index">
      <span [ngOptionHighlight]="search">
          {{ item.referenceNumber +'-'+ item.purchaseOrderStatusName}}
      </span>
   </ng-template>

</ng-select>

I got all values in formModel.schema.purchaseOrders['purchaseOrders']. Now all Reference Number is displaying.

Question:-

Now how to display the referenceNumber where the purchaseOrderStatusName= "OPEN"

Instead of giving condition in NgSelect dropdown, is there any way to give a condition in get method itself?

Answer 1

I guess this is what you are looking for.

Show only the referenceNumber when purchaseOrderStatus is OPEN and both reference number and status name when purchaseOrderStatus is RECEIVED or CANCELLED.

Updated answer based on OP comment

A new field label can be added in the data whose value will be set based on the required condition.

TS file:

import { map } from 'rxjs/operators';

getAllPurchaseOrders() {
  this.purchaseOrderService.getAllPurchaseOrders()
  pipe(
    map(data => {
      data.label =
        data.purchaseOrderStatusName !== 'OPEN'
          ? data.referenceNumber + '-' + data.purchaseOrderStatusName
          : data.referenceNumber;
    })
  )
  .subscribe(
    data => { this.formModel.schema.purchaseOrders['purchaseOrders'] = data;
  });
}

Ng-Select Drop Down:

<span [ngOptionHighlight]="search">
    {{ item.label }}
</span>

---

Previous Answer:

Condition given inside ngSelect dropdown without manipulating data

One line approach -

<span [ngOptionHighlight]="search">
    {{ item.referenceNumber }} {{ item.purchaseOrderStatusName !== 'OPEN' ? '-' + item.purchaseOrderStatusName : '' }}
</span>

Multiple line approach -

<span *ngIf="item.purchaseOrderStatusName !== 'OPEN'" [ngOptionHighlight]="search">
  {{ item.referenceNumber +'-'+ item.purchaseOrderStatusName }}
</span>
<span *ngIf="item.purchaseOrderStatusName === 'OPEN'" [ngOptionHighlight]="search">
  {{ item.referenceNumber }}
</span>