PrimeNG Group Dropdown

I need a custom implementation for PrimeNG Grouped Dropdown. In the available options in the documentation, there is no way to click the group and show selected value for the label.

If i implement with the custom templates, selected group option label is not showing. Here is the link to document

<p-select
#storageDropdown
[options]="(storageDetails$ | async) ?? []"
[(ngModel)]="selectedStorage"
(onChange)="onSelectStorage($event)"
[group]="true"
appendTo="body"
optionGroupChildren="items"
optionLabel="label"
optionValue="value"
optionGroupLabel="label"
[style]="{ 'min-width': '150px' }"
>
<ng-template let-group pTemplate="group">
<div
class="flex align-items-center justify-content-between w-full p-dropdown-group clickable-group"
(click)="onGroupClick(group, storageDropdown)">
<span>{{ group.label }}</span>
</div>
</ng-template>
<ng-template let-item pTemplate="item">
<div class="flex align-items-right justify-content-between w-full ml-3">
<div class="flex align-items-right">
<span>{{ item.label }}</span>
</div>
</div>
</ng-template>
</p-select>


Looking for some suggestions

Continue reading...