如何在ngx-mat-select-search的全选复选框旁添加自定义文本？

方案1：自定义全选模板（最推荐，支持动态文本、样式完全可控） #

ngx-mat-select-search 本身支持通过内置的模板指令自定义全选区域内容，无需修改源码，直接替换默认的全选复选框结构即可：

• 在<ngx-mat-select-search>标签内部插入ngxMatSelectSearchSelectAllTemplate自定义模板
• 模板上下文已内置全选切换方法、选中状态、半选状态可直接调用，你可以在复选框内任意添加需要的文本、样式
  代码示例：

<mat-select [formControl]="yourControl" placeholder="选择项">
  <ngx-mat-select-search [formControl]="yourFilterControl" [showToggleAll]="true">
    <!-- 自定义全选区域模板 -->
    <ng-template 
      ngxMatSelectSearchSelectAllTemplate 
      let-toggleAll="toggleAll" 
      let-isIndeterminate="indeterminate" 
      let-isAllSelected="selected"
    >
      <mat-checkbox 
        [checked]="isAllSelected" 
        [indeterminate]="isIndeterminate"
        (change)="toggleAll($event.checked)"
      >
        全选
        <!-- 这里添加你需要的自定义文本，可绑定动态变量、自定义样式 -->
        <span style="margin-left: 8px; color: #999; font-size: 12px;">你要添加的指定文本</span>
      </mat-checkbox>
    </ng-template>
  </ngx-mat-select-search>

  <mat-option *ngFor="let item of filteredList | async" [value]="item">
    {{ item.name }}
  </mat-option>
</mat-select>

方案2：CSS伪元素注入文本（适合静态文本的轻量场景） #

如果只需要添加静态文本，不想改动HTML结构，可以通过CSS样式直接注入内容：

• 如果组件开启了视图封装（默认Emulated模式），需要加::ng-deep穿透样式，或者将样式写入全局样式文件
  代码示例：

/* 全选标签容器布局调整 */
::ng-deep .ngx-mat-select-search-select-all .mat-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* 注入自定义文本 */
::ng-deep .ngx-mat-select-search-select-all .mat-checkbox-label::after {
  content: "你要添加的指定文本";
  font-size: 12px;
  color: #666;
}

注意：该方案依赖ngx-mat-select-search的内部类名，若后续依赖包升级改动了类名可能导致样式失效，优先推荐方案1。

内容的提问来源于stack exchange，提问作者RoyBarOn