How to use primeng dropdown?

Question

I used the "select" for the dropdown. Below is the coding.

<div class="ui-grid-col-6">
      <div class="form-group">
        <select name="status" formControlName="purchaseOrderStatusId">
          <option>Select PurchaseOrderStatus</option>
          <option *ngFor="let PurchaseOrderStatus of allPurchaseOrderStatus" value="{{ PurchaseOrderStatus.id }}">
                 {{ PurchaseOrderStatus.code }}
          </option>
        </select>
     </div>
</div>

Here all values from the API are saved in the variable allPurchaseOrderStatus.

And I want id as my stored value and code as the display value.

I need the same concept using the primeNg component.

Answer 1

You can use something like below code to replace PrimeNG dropdown with your existing one.

Step 1: Import DropdownModule in your component.

import {DropdownModule} from 'primeng/dropdown';

Step 2: Add Dropdown in your html:

<p-dropdown [options]="PurchaseOrderStatus" [(ngModel)]="selectedPurchaseOrderStatus" optionLabel="code">

So in selectedPurchaseOrderStatus you will get selected order object and you can get id like selectedPurchaseOrderStatus.id.

You can also use OnChange event to get selected options.

onChange()

event.originalEvent: Browser event

event.value: Selected option value

Callback to invoke when value of dropdown changes.

for more example check below link of Dropdown in PrimeNG.

PrimeNG Dropdown

Hope this will helps.

Answer 2

First, you need to create one array in your TS file having label and value field. something like this:

PurchaseOrderStatus=[
 {label:'code1',value:'id1'},
 {label:'code2',value:'id2'},
 .....
]

here, in label field, you need to assign it code because label field will be used as the display value in the dropdown and in the value field, you need to assign it id as it will be used as the stored value of that particular option.

and in HTML file

<div class="ui-grid-col-6">
      <div class="form-group">
       <p-dropdown [options]="PurchaseOrderStatus" [(ngModel)]="selectedOrders" [filter]="true"></p-dropdown>
     </div>
</div>