Fundamentals of ag-Grid with Angular: Custom Components


  • Develop a SliderFilterComponent that uses Angular Material's <mat-slider> component for filtering numeric values.
  • Define the SliderFilterParams for passing custom parameters to the filter component in a column definition via the floatinFilterComponentParams property.
  • Implement the onParentModelChanged() lifecycle method to set the value of the slider if the user modifies the parent number filter model value.
  • Using the input output binding (yeah, it's a bit confusing) on the <mat-slider> component to invoke the onFloatingFilterChanged() method on the NumberFilter instance to filter a column.
  • Register the custom component using the frameworkComponents input binding on the <ag-grid-angular> component.
  • Use the newly created sliderFilter for the floatingFilterComponent property in the column definition.

I finished! On to the next chapter