I want to use primeng dropdown group. I have researched it on https://primeng.org/dropdown and tried using the below method.

<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' }
      ]
    }
  ];

But I don’t want clickable group header. Actually it is not clickable on angular.org example. However it is clickable when I tried like that.

I don’t know if it is possible but my main purpose is to make visible/unvisible group items if te group has items when I click on group header. I will try that after I solved this closing problem but I did’nt prevent to close it.