Fundamentals of ag-Grid with Angular: Custom Components



  • 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 immediate open() the date picker.
  • After the user has selected a date, we'll use the stopEditing() method available to us in the ICellEditorParams 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 the cellEditor property in the column definition.

I finished! On to the next chapter