how to control the display of the selected elements in ng-select

i can't limit the display of selected options in ng-select in angular

Is there a way I can control the display of selected items in ng-select? Currently, with numerous options and a 'select all' feature, selecting all options floods the UI. It would be helpful to limit the displayed selected options, followed by ellipses (...) and a tooltip or similar. Thank you! ♥

             <ng-select [items]="advertisersDv" class="custom" id="AdDv"
                        bindLabel="advertiserName"
                        [compareWith]="compareFn"
                        [multiple]="true"
                        [virtualScroll]="true"
                        [closeOnSelect]="false"
                        groupBy="partnerName"
                        [readonly]="!hasPermission([{moduleAccess:ModuleAccess.ADVERTISER_MANAGEMENT,accessLevel:AccessLevel.UPDATE}])"
                        (clear)="clearAll('dvAdvertisers')"
                        (change)="isCheckedAllDv();selectionchange($event,'dvAdvertisers')"
                        (open)="isCheckedAllDv()"
             formControlName="dvAdvertisers">
               <ng-template ng-header-tmp>
                 <label>
                   <input type="checkbox" class="form-check-input" [checked]="isCheckedAllDvAdvertisers"
                          (change)="toggleSelectAllDv($event)">
                   <span class="fw-bold ps-2 fs-6">All
                </span>
                 </label>
               </ng-template>
             </ng-select>

ng-select library allow you to create a custom template for the selected items:

<ng-template ng-multi-label-tmp let-items="items" let-clear="clear">

Then can you select only 4 elements to be displayed with a slice pipe.

<div class="ng-value" *ngFor="let item of items | slice : 0 : 4">

And you can bind a matTooltip on your ellipsis to show all your items :

<div class="ng-value" *ngIf="items.length > 4">
          <span class="ng-value-label" [matTooltip]="getAllCitiesLabel()"
            >{{ items.length - 4 }} more...</span>

Full code sample and Stackblitz reproduction :

    <ng-select
  [items]="cities"
  bindLabel="name"
  bindValue="id"
  [multiple]="true"
  placeholder="Select cities"
  [(ngModel)]="selectedCityIds"
>
  <ng-template ng-multi-label-tmp let-items="items" let-clear="clear">
    <div class="ng-value" *ngFor="let item of items | slice : 0 : 4">
      <span class="ng-value-label">{{ item.name }}</span>
      <span class="ng-value-icon right" (click)="clear(item)" aria-hidden="true"
        >×</span
      >
    </div>
    <div class="ng-value" *ngIf="items.length > 4">
      <span class="ng-value-label" [matTooltip]="getAllCitiesLabel()"
        >{{ items.length - 4 }} more...</span
      >
    </div>
  </ng-template>
</ng-select>

See related post here