Custom filter in ag-grid is not working in Angular 10 application

Question

I am developing an demo application where ag-grid is used. I need to create a custom filter for filtering numbers using ranger. So I have created a custom filter for that. But the filter is not working and showing in head section of the grid. the code is given below:

app component html:

<ag-grid-angular 
  #agGrid
  style="width: 100%; height: 500px;"
  domLayout='normal'
  class="ag-theme-alpine" 
  [rowData]="rowData" 
  [defaultColDef]="defaultColDef"
  [columnDefs]="columnDefs"
  [statusBar]="statusBar"
  rowSelection="multiple"
  (gridReady)="onGridReady($event)"
  floatingFilter="true"
  [singleClickEdit]="true"
  >
</ag-grid-angular>

app component ts:

import { MemberInfoService } from './_Services/member-info.service';
import { Component, OnInit } from '@angular/core';
import { ColDef, GridApi } from 'ag-grid-community';
import 'ag-grid-enterprise';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
import { SliderFloatingFilter } from './SliderFloatingFilter/slider-floating-filter.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Ng-Grid Example';

  private gridApi: GridApi;
  private gridColumnApi;
  public statusBar;

  rowData: any;
  columnDefs: ColDef[] = null;
  frameworkComponents;

  constructor(private memberService: MemberInfoService) { }

  defaultColDef: {
    editable: false,
    sortable: true,
    filter: 'agTextColumnFilter'
  }

  ngOnInit(): void {
    this.columnDefs = [
      {
        headerName: 'Member Id', field: 'MemberId', sortable: true, filter: 'agNumberColumnFilter',
        width: 150,
        checkboxSelection: true, headerCheckboxSelection: true, headerCheckboxSelectionFilteredOnly: true 
      },
      { headerName: 'Member Name', field: 'MemberName', sortable: true, filter: 'agTextColumnFilter' },
      { headerName: 'Category', field: 'Category', sortable: true, filter: 'agTextColumnFilter', width: 150 },
      { headerName: 'Floor', field: 'Floor', sortable: true, filter: 'agTextColumnFilter' },
      { headerName: 'Shop No', field: 'ShopNo', sortable: true, filter: 'agTextColumnFilter', width: 150 },
      { headerName: 'Shop Name', field: 'ShopName', sortable: true, filter: 'agTextColumnFilter' },
      {
        headerName: 'Amount', field: 'Amount', editable: true, sortable: false, filter: 'agNumberColumnFilter',
        valueParser: ({ newValue, oldValue }) => isNaN(Number(newValue)) ? oldValue : Number(newValue),
        pinned: 'right', width: 150,
        //cellStyle: { color: '#fff', 'background-color': '#37474f' },        
        // cellStyle: ({ value }) => ({
        //   'background-color': value > 1000 ? 'green' : 'white'
        // }),
        cellClassRules: {
          'cell-value-negative': ({ value }) => value < 0,
          'cell-value-positive': ({ value }) => value >= 0
        },
        floatingFilterComponent: 'sliderFloatingFilter',
        floatingFilterComponentParams: {
          maxValue: 0,
          suppressFilterButton: true,
        },
        suppressMenu: false,
      }
    ];

    this.statusBar = {
      statusPanels: [
        {
          statusPanel: 'agTotalAndFilteredRowCountComponent',
          align: 'left',
        },
        {
          statusPanel: 'agTotalRowCountComponent',
          align: 'center',
        },
        { statusPanel: 'agFilteredRowCountComponent' },
        { statusPanel: 'agSelectedRowCountComponent' },
        { statusPanel: 'agAggregationComponent' },
      ],
    };

    this.rowData = this.memberService.getMemberInfo();

    this.frameworkComponents = { sliderFloatingFilter: SliderFloatingFilter };
  }

  // onGridReady({ api }: { api: GridApi }) {    
  //   this.gridApi = api;    
  //   this.gridApi.sizeColumnsToFit();
  // }

  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;

    params.api.sizeColumnsToFit();
    window.addEventListener('resize', function () {
      setTimeout(function () {
        params.api.sizeColumnsToFit();
      });
    });

    params.api.sizeColumnsToFit();
  }
}

custom filter html:

<input 
    type="range" 
    min="0" 
    [max]="maxValue" 
    data-show-value="true" 
    data-popup-enabled="true" 
    [(ngModel)]="currentValue"
    (ngModelChange)="valueChanged()" />

Custom filter ts:

import { Component } from '@angular/core';
import { AgFrameworkComponent } from 'ag-grid-angular';
import {IFloatingFilter,IFloatingFilterParams,NumberFilter,NumberFilterModel,} from 'ag-grid-community';

export interface SliderFloatingFilterParams extends IFloatingFilterParams {
  value: number;
  maxValue: number;
}

@Component({
  templateUrl: './slider-floating-filter.component.html'
})
export class SliderFloatingFilter implements IFloatingFilter, AgFrameworkComponent<SliderFloatingFilterParams> {
  public params: SliderFloatingFilterParams;

  public maxValue: number;
  public currentValue: number;

  agInit(params: SliderFloatingFilterParams): void {
    this.params = params;
    this.maxValue = this.params.maxValue;
    this.currentValue = 0;
  }

  valueChanged() {
    let valueToUse = this.currentValue === 0 ? null : this.currentValue;
    this.params.parentFilterInstance(function (instance) {
      (<NumberFilter>instance).onFloatingFilterChanged(
        'greaterThan',
        valueToUse
      );
    });
  }

  onParentModelChanged(parentModel: NumberFilterModel): void {
    if (!parentModel) {
      this.currentValue = 0;
    } 
    else {      
      this.currentValue = parentModel.filter;
    }
  }
}

Answer 1

You need to pass your frameworkComponents to your grid instance, change your html code to:

<ag-grid-angular 
  #agGrid
  style="width: 100%; height: 500px;"
  domLayout='normal'
  class="ag-theme-alpine" 
  [rowData]="rowData" 
  [defaultColDef]="defaultColDef"
  [columnDefs]="columnDefs"
  [statusBar]="statusBar"
  rowSelection="multiple"
  [frameworkComponents]="frameworkComponents"
  (gridReady)="onGridReady($event)"
  [singleClickEdit]="true"
  >
</ag-grid-angular>

Then add the SliderFloatingFilter to the entryComponents in your module. like this:

entryComponents: [SliderFloatingFilterComponent]

Demo.