PrimeNG dropdown selected option with dynamic value

Question

How to set PrimeNG p-dropdown selected option with dynamic value ?

I am using Formgroup, Formcontrol and my dropdown are set with data querying from database. Now in one of my edit component page I want selected option with dynamic value.

Solution

Get the dynamic list of values and push it to the drop down. Below is an example.

data.dtOrgList contains list of values from service layer.

    html
    ------------------
    <p-dropdown [options]="orgs" [(ngModel)]="selectedOrg"></p-dropdown>

    component.ts
    -------------------

     orgs:SelectItem[];
     selectedOrg : string;
     dtOrgList: Array<any>;

    this.itemDetailsService.getItemDetails(input).subscribe(
                data => {
                    this.dtOrgList = data.dtOrgList;
                    this.orgs = [];
                    this.orgs.push({label: 'Select', value: null});
                    for(var i = 0; i < this.dtOrgList.length; i++) {
                        this.orgs.push({label: this.dtOrgList[i], value: this.dtOrgList[i]});
                    }
                    })

Comments

[JuanDM]

Can you share your code?

[Murat Yıldız]

Have a look at How to set default value for PrimeNG p-dropdown.

[SamuraiJack]

You saved my life ! :D