Fundamentals of ag-Grid with Angular: Custom Components

Goals

• 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.

Links

• Floating Filter Component