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.

@Angle please check my answer it will help you to add dropdown in your app. — CodeChanger, Apr 03 '19 at 07:08

CodeChanger · Answer 1 · 2019-08-01T11:39:35.970

2

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.

edited Aug 01 '19 at 11:39

answered Apr 03 '19 at 07:00

CodeChanger

7,953
5
49
80

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 Apr 03 '19 at 08:02
I am new in angular. Kindly give me a explanation ?? – Angel Reji Apr 03 '19 at 08:07
`selectedPurchaseOrderStatus` object where any selected values stores. and `PurchaseOrderStatus` is your array where you store api response. – CodeChanger Apr 03 '19 at 09:00
Display & stored value will take automatically from your provided array. – CodeChanger Apr 03 '19 at 09:00

score -1 · Answer 2 · edited Apr 06 '19 at 08:42

-1

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>

edited Apr 06 '19 at 08:42

halfer

19,824
17
99
186

answered Apr 03 '19 at 07:12

AddWeb Solution Pvt Ltd

21,025
5
26
57

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 Apr 03 '19 at 07:56
https://www.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. – AddWeb Solution Pvt Ltd Apr 03 '19 at 08:22

How to use primeng dropdown?

2 Answers2

Linked