[FIXED] PrimeNG: Click on a li element of p-dropdown


I am using a p-dropdown in my project from library PrimeNG (https://www.primefaces.org/primeng/v8.2.7-lts/#/dropdown). Well, what I want to do is to group the elements of the dropdown and that I have achieved. My question is, is it possible that the elements that are in bold (in the picture it would be for example Germany or USA) can be selected? Now, if I select it, it does not appear as selected in the dropdown. Is there any way?

enter image description here

Another option would be to find some way to have the elements listed as you can see in the second picture but using the PrimeNG dropdown element.

enter image description here

  • Version Angular: 8.2.14
  • Version PrimeNG: 8.1.1


I think the best way would be to use the item-template and create a way to append the indent to the item (e.g. pipe (postcalculated), extended SelectItem (precalculated)…) depending on the index value. Don’t keep the group.

I mean something similar to this:

<p-dropdown [options]="myOptions">
    <ng-template let-option pTemplate="item"> 
        {{ option.label | addIndentSpaces }}

Please refer to the templating section "Custom Content" within the docs.

Answered By – MoxxiManagarm

Answer Checked By – Candace Johnson (Easybugfix Volunteer)

Leave a Reply

(*) Required, Your email will not be published