I want to make visible/unvisible group items if the group has items when I click on group header.
Is it possible?
For example, I want to see 3 items (AA,BB,CC) in dropdown, first 2 options(AA and BB) should be selectable and when I click on third option (CC), sub items (CC1, CC2, CC3) should be visible. How can I do?
<code><p-dropdown
[options]="groupOptions"
[(ngModel)]="selectedGroup"
placeholder="Select"
[group]="true">
<ng-template let-group pTemplate="group">
<div class="flex align-items-center">
<span >{{ group.label }}</span>
</div>
</ng-template>
</p-dropdown>
groupOptions= [
{ value: '1', label: 'AA' },
{ value: '2', label: 'BB' },
{
label: 'CC',
value: '3',
items: [
{ value: '31', label: 'CC1' },
{ value: '32', label: 'CC2' },
{ value: '33', label: 'CC3' }
]
}
];
</code>
<code><p-dropdown
[options]="groupOptions"
[(ngModel)]="selectedGroup"
placeholder="Select"
[group]="true">
<ng-template let-group pTemplate="group">
<div class="flex align-items-center">
<span >{{ group.label }}</span>
</div>
</ng-template>
</p-dropdown>
groupOptions= [
{ value: '1', label: 'AA' },
{ value: '2', label: 'BB' },
{
label: 'CC',
value: '3',
items: [
{ value: '31', label: 'CC1' },
{ value: '32', label: 'CC2' },
{ value: '33', label: 'CC3' }
]
}
];
</code>
<p-dropdown
[options]="groupOptions"
[(ngModel)]="selectedGroup"
placeholder="Select"
[group]="true">
<ng-template let-group pTemplate="group">
<div class="flex align-items-center">
<span >{{ group.label }}</span>
</div>
</ng-template>
</p-dropdown>
groupOptions= [
{ value: '1', label: 'AA' },
{ value: '2', label: 'BB' },
{
label: 'CC',
value: '3',
items: [
{ value: '31', label: 'CC1' },
{ value: '32', label: 'CC2' },
{ value: '33', label: 'CC3' }
]
}
];