带有输入字段排序图标位置的ngx-datatable自定义标题模板

// custom-header-template.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'custom-header-template',
  template: `
    <div>
      <input type="text" [(ngModel)]="searchText" placeholder="Search">
      <span (click)="sort.emit()">Sort</span>
    </div>
  `
})
export class CustomHeaderTemplateComponent {
  @Input() searchText: string;
  @Output() sort = new EventEmitter<void>();
}

// parent.component.html
<ngx-datatable>
  <ngx-datatable-column name="Name" prop="name">
    <ng-template ngx-datatable-header-template>
      <custom-header-template (sort)="sortData()"></custom-header-template>
    </ng-template>
  </ngx-datatable-column>
</ngx-datatable>

// parent.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'parent-component',
  templateUrl: 'parent.component.html'
})
export class ParentComponent {
  sortData() {
    // Perform data sorting here
  }
}