title: Custom filter in ag-grid is not working in Angular 10 application
body: <p>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:</p>
  <p><strong>app component html:</strong></p>
  <pre><code>&lt;ag-grid-angular 
    #agGrid
    style=&quot;width: 100%; height: 500px;&quot;
    domLayout='normal'
    class=&quot;ag-theme-alpine&quot; 
    [rowData]=&quot;rowData&quot; 
    [defaultColDef]=&quot;defaultColDef&quot;
    [columnDefs]=&quot;columnDefs&quot;
    [statusBar]=&quot;statusBar&quot;
    rowSelection=&quot;multiple&quot;
    (gridReady)=&quot;onGridReady($event)&quot;
    floatingFilter=&quot;true&quot;
    [singleClickEdit]=&quot;true&quot;
    &gt;
  &lt;/ag-grid-angular&gt;
  </code></pre>
  <p><strong>app component ts:</strong></p>
  <pre><code>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 }) =&gt; isNaN(Number(newValue)) ? oldValue : Number(newValue),
          pinned: 'right', width: 150,
          //cellStyle: { color: '#fff', 'background-color': '#37474f' },        
          // cellStyle: ({ value }) =&gt; ({
          //   'background-color': value &gt; 1000 ? 'green' : 'white'
          // }),
          cellClassRules: {
            'cell-value-negative': ({ value }) =&gt; value &lt; 0,
            'cell-value-positive': ({ value }) =&gt; value &gt;= 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();
    }
  }
  </code></pre>
  <p><strong>custom filter html:</strong></p>
  <pre><code>&lt;input 
      type=&quot;range&quot; 
      min=&quot;0&quot; 
      [max]=&quot;maxValue&quot; 
      data-show-value=&quot;true&quot; 
      data-popup-enabled=&quot;true&quot; 
      [(ngModel)]=&quot;currentValue&quot;
      (ngModelChange)=&quot;valueChanged()&quot; /&gt;
  </code></pre>
  <p><strong>Custom filter ts:</strong></p>
  <pre><code>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&lt;SliderFloatingFilterParams&gt; {
    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) {
        (&lt;NumberFilter&gt;instance).onFloatingFilterChanged(
          'greaterThan',
          valueToUse
        );
      });
    }
  
    onParentModelChanged(parentModel: NumberFilterModel): void {
      if (!parentModel) {
        this.currentValue = 0;
      } 
      else {      
        this.currentValue = parentModel.filter;
      }
    }
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/GYpIa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GYpIa.png" alt="enter image description here" /></a></p>