CODEWITHSUNDEEP
angularangular6angular7angular8angular-ngselect
Angel Reji
Angel Reji

Reputation: 553

Ng Select dropdown with condition

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?

Upvotes: 0

Views: 4701

Answers (2)

abd995
abd995

Reputation: 1829

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>

Upvotes: 1

Pranay Rana
Pranay Rana

Reputation: 176886

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>

Upvotes: 1

Related Questions