Currently my custom ngx-mat-select-search looks like this:

I want it to look like this, with a header Cleint Type, No. of PDOs right above the search field. How to achieve this in ngx-mat-select-search? I’m using Angular 14

component.html

<mat-form-field color="accent">
  <mat-select [formControl]="multiCtrl" [placeholder]="placeHolderName" [multiple]="true" #multiSelect>
    <mat-option>
      <ngx-mat-select-search placeholderLabel="Type to search..." noEntriesFoundLabel="'no entries found'"
        [showToggleAllCheckbox]="true" (toggleAll)="toggleSelectAll($event)" [formControl]="multiFilterCtrl"
        [toggleAllCheckboxTooltipMessage]="tooltipMessage"
        [toggleAllCheckboxTooltipPosition]="'above'"></ngx-mat-select-search>
    </mat-option>
    <ng-container *ngIf="isDate">
      <mat-option *ngFor="let option of filteredMulti | async" [value]="option">
        {{ (option.name !== 'null' && option.name !== '0000-00-00 00:00:00') ? (option.name | date: 'mediumDate') : option.name }}
      </mat-option>
    </ng-container>
    <ng-container *ngIf="!isDate">
      <mat-option *ngFor="let option of filteredMulti | async" [value]="option">
        <div class="d-flex justify-content-between">
          <span>{{option.name}}</span>
          <span class="d-none">-</span>
          <span>{{option?.count}}</span>
        </div>
      </mat-option>
    </ng-container>
  </mat-select>
</mat-form-field>

component.css

::ng-deep .ngx-mat-select-search-toggle-all-tooltip {
  font-size: 0.8em;
}

Sample demo