CODEWITHSUNDEEP
angulartypescriptdropdownprimeng
Alba
Alba

Reputation: 490

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

Upvotes: 3

Views: 2005

Answers (1)

MoxxiManagarm
MoxxiManagarm

Reputation: 9124

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 }}
    </ng-template>
</p-dropdown>

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

Upvotes: 4

Related Questions