Outline
- Fundamentals of ag-Grid with Angular
- Fundamentals of ag-Grid with Angular: Data
- Fundamentals of ag-Grid with Angular: Columns
- Fundamentals of ag-Grid with Angular: Filtering
- Fundamentals of ag-Grid with Angular: Rows
- Fundamentals of ag-Grid with Angular: Styling
- Fundamentals of ag-Grid with Angular: Cell Editing
- Fundamentals of ag-Grid with Angular: Custom Components
Outline
- Fundamentals of ag-Grid with Angular
- Fundamentals of ag-Grid with Angular: Data
- Fundamentals of ag-Grid with Angular: Columns
- Fundamentals of ag-Grid with Angular: Filtering
- Fundamentals of ag-Grid with Angular: Rows
- Fundamentals of ag-Grid with Angular: Styling
- Fundamentals of ag-Grid with Angular: Cell Editing
- Fundamentals of ag-Grid with Angular: Custom Components
Goals
- Develop a
MaterialHeaderComponent
that uses Angular Material icons to display links for sorting the grid. - Implement the
agInit()
lifecycle method to access the column'sdisplayName
, as well as theenableSorting
property to determine if sorting is enabling or not. - Use the
isSortAscending()
,isSortDescending()
, andisSortNone()
methods that are exposed on thecolumn
property of theIHeaderParams
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 theagColumnHeader
name when registering the custom component.