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?

abd995 · Accepted Answer · 2019-08-09T12:45:37.413

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>

Instead of giving condition in NgSelect dropdown , is there any way to give a condition in get method(ts file) itself?? — Angel Reji, Aug 09 '19 at 10:30

score 1 · Answer 2 · answered Aug 09 '19 at 08:54

1

you can do like this , by making use ng-container

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

answered Aug 09 '19 at 08:54

Pranay Rana

175,020
35
237
263

Instead of giving condition in NgSelect dropdown , is there any way to give a condition in get method itself?? – Angel Reji Aug 09 '19 at 10:30
@AngelReji- you can create getmethod in ts file and call it from html , for that replace condition line with the get method you create – Pranay Rana Aug 13 '19 at 06:45

Ng Select dropdown with condition

2 Answers2