Как изменить заполнитель в фильтре Ag-grid?

Question

Я использую Ag-grid, и я просто хочу изменить заполнитель текста фильтра. Мне нужно использовать пользовательский фильтр, или это можно сделать и другими способами. Пожалуйста, помогите

Ниже ссылка на изображение. В котором я попытался показать «фильтр» текст для заполнителя, который мне нужно изменить.

Answer 1

Установите этот StackBlitz: Пользовательский заполнитель с ag-grid . Столбец Make имеет пользовательский фильтр.

В вашем app.module.ts:

imports:[ BrowserModule, FormsModule, AgGridModule.withComponents([CustomFilterComponent]) ]

В вашем HTML-файле:

<ag-grid-angular 
    style="width: 500px; height: 500px;" 
    class="ag-theme-balham"
    [enableSorting]="true"
    [enableFilter]="true"
    [rowData]="rowData" 
    [columnDefs]="columnDefs"
    [frameworkComponents]="frameworkComponents"
    >
</ag-grid-angular>

В вашем файле TS:

export class AppComponent  {
  name = 'Angular';

  private frameworkComponents;

  constructor() {
    this.frameworkComponents = { customFilter: CustomFilterComponent };
  }

  columnDefs = [
    {headerName: 'Make', field: 'make', filter: "customFilter" },
    {headerName: 'Model', field: 'model' },
    {headerName: 'Price', field: 'price'}
  ];

  rowData = [
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxter', price: 72000 }
  ];
}

В вашем custom-filter.component.ts файле:

import {Component, ViewChild, ViewContainerRef} from "@angular/core";

import {IAfterGuiAttachedParams, IDoesFilterPassParams, IFilterParams, RowNode} from "ag-grid-community";
import {IFilterAngularComp} from "ag-grid-angular";

@Component({
    selector: 'filter-cell',
    template: `
        <div class="container">
            Custom Filter: <input #input (ngModelChange)="onChange($event)" [ngModel]="text" class="form-control" placeholder="Custom placeholder">
        </div>
    `, styles: [
        `
            .container {
                border: 2px solid #22ff22;
                border-radius: 5px;
                background-color: #bbffbb;
                width: 200px;
                height: 50px
            }

            input {
                height: 20px
            }
        `
    ]
})
export class CustomFilterComponent implements IFilterAngularComp {
  private params: IFilterParams;
    private valueGetter: (rowNode: RowNode) => any;
    public text: string = '';

    @ViewChild('input', {read: ViewContainerRef}) public input;

    agInit(params: IFilterParams): void {
        this.params = params;
        this.valueGetter = params.valueGetter;
    }

    isFilterActive(): boolean {
        return this.text !== null && this.text !== undefined && this.text !== '';
    }

    doesFilterPass(params: IDoesFilterPassParams): boolean {
        return this.text.toLowerCase()
            .split(" ")
            .every((filterWord) => {
                return this.valueGetter(params.node).toString().toLowerCase().indexOf(filterWord) >= 0;
            });
    }

    getModel(): any {
        return {value: this.text};
    }

    setModel(model: any): void {
        this.text = model ? model.value : '';
    }

    ngAfterViewInit(params: IAfterGuiAttachedParams): void {
        setTimeout(() => {
            this.input.element.nativeElement.focus();
        })
    }

    onChange(newValue): void {
        if (this.text !== newValue) {
            this.text = newValue;
            this.params.filterChangedCallback();
        }
    }
}