CODEWITHSUNDEEP
angularlabeldropdownprimeng
Lamyae Lac
Lamyae Lac

Reputation: 53

primeng dropdown not displaying values

Is it necessary to map to labels and values in order to show values on dropdown ?

I'm trying to show enums on my dropdown but they are not displaying correctly !

  export enum nature
    {
        annuelle="Annuelle",
        semestrielle="Semestrielle",
        trimestrielle="Trimestrielle"

    }

 naturevalues = Object.values(nature);

 <div class="ui-grid-col-6">
                    <p-dropdown [options]="naturevalues"  formControlName="nature"></p-dropdown>
                </div>

this is the list I can see the chosen value on the console i can see the chosen value on the console I tried to add optionLabel="value" but in vain

Upvotes: 2

Views: 3816

Answers (2)

Kamil
Kamil

Reputation: 592

For those who come here from Google:

nature.enum.ts

export enum Nature {
   annuelle = "Annuelle",
   semestrielle = "Semestrielle",
   trimestrielle = "Trimestrielle"
}

In component.ts: define a list, where Nature is just an imported enum:

import {Nature} from 'enums/nature.enum';
//other imports

  public natures = Nature;

And in your template use keyvalue pipe and set optionLabel to value:

<div class="ui-grid-col-6">
    <p-dropdown [options]="natures | keyvalue" optionLabel="value" formControlName="nature"></p-dropdown>
</div>

Upvotes: 5

Cagri Tacyildiz
Cagri Tacyildiz

Reputation: 17610

Demo set to primeng options this

 naturevalues =   Object.keys(nature).map(key => ({ label: nature[key], value: key }));

Upvotes: 3

Related Questions