Join our newsletter!
Get exclusive content, resources, and more!
1-2 emails per week, no spam
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
DateEditorComponent
that uses Angular Material's<mat-datepicker>
to display a date picker for editing a cell that contains a date value. This is a big improvement over using one of the provided cell editors. - Implement the
agInit()
lifecycle method to set the value of the date picker. - Implement the
getValue()
lifecycle method to return the date picker value to ag-Grid. - Wire up the date picker in the template, and then using reactive forms in Angular, bind a
FormControl
to the<input>
element. We'll use the control to set the value into the date picker as well as to obtain the value of the date picker when a user selects a date. - Implement the
ngAfterViewInit()
method to immediateopen()
the date picker. - After the user has selected a date, we'll use the
stopEditing()
method available to us in theICellEditorParams
object to immediately stop editing the cell. - Register the custom component using the
frameworkComponents
input binding on the<ag-grid-angular>
component. - Use the newly created
dateEditor
for thecellEditor
property in the column definition.