How do I set a custom mat-select header on ngx-mat-select-search?

Question

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

Answer 1

I came up with a quick solution by adding a disabled mat-option above your search select panel and styling it accordingly, eg:

in mat-tooltip-select-all.component.html:

...
    <mat-option [disabled]="true">
      <div class="header-row">
        <span class="start-text">Cleint Type</span>
        <span class="end-text">No. of PDOs</span>
      </div>
    </mat-option>

    <mat-option>
      <ngx-mat-select-search
        placeholderLabel="Type to search..."
        noEntriesFoundLabel="'no entries found'"
...

in mat-tooltip-select-all.component.css:

.header-row {
  display: flex;
  justify-content: space-between;
  margin-right: 24px;
}

.start-text {
  font-size: 0.7em;
}

.end-text {
  font-size: 0.7em;
  text-align: end;
}

/* needed so that the container takes up its full space */
::ng-deep .mdc-list-item__primary-text {
  min-width: calc(100%);
}

This is what it's looking like to me.

Hope this helps, wishing you a wonderful day!