Fundamentals of ag-Grid with Angular: Custom Components



  • Develop a MaterialHeaderComponent that uses Angular Material icons to display links for sorting the grid.
  • Implement the agInit() lifecycle method to access the column's displayName, as well as the enableSorting property to determine if sorting is enabling or not.
  • Use the isSortAscending(), isSortDescending(), and isSortNone() methods that are exposed on the column property of the IHeaderParams to determine the current sorting state of a column.
  • Use the setSort() method to update the current sorting of the grid.
  • Register the custom component using the frameworkComponents input binding on the <ag-grid-angular> component. A custom header must use the agColumnHeader name when registering the custom component.

I finished! On to the next chapter