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.

Solution

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.

Comments

[Angel Reji]

Can anybody help me??

[CodeChanger]

@Angle please check my answer it will help you to add dropdown in your app.

[Angel Reji]

PurchaseOrderStatus=[ {label:'code1',value:'id1'}, {label:'code2',value:'id2'}, ..... ]I think the code1, code2... u mentioned is the values which want to display in the dropdown. But all the values which I get is from the Api and all the values I stored in the variable "allPurchaseOrderStatus". Its not possible to write the all values in the ts file

[Angel Reji]

Thank you.. Here what you mean by "selectedPurchaseOrderStatus" .Is that the variable which saved all Api values. Let me know that. And here where we write the dispaly value and stored value??

[Angel Reji]

I am new in angular. Kindly give me a explanation ??

[AddWeb Solution Pvt Ltd]

primefaces.org/primeng/#/dropdown as per this doc for using primeng dropdown you need to create this type of JSON array so for that you need to extract those values from "allPurchaseOrderStatus" variable using for loop and add it to the other array and then you can use it for your dropdown.

[CodeChanger]

selectedPurchaseOrderStatus object where any selected values stores. and PurchaseOrderStatus is your array where you store api response.

[CodeChanger]

Display & stored value will take automatically from your provided array.