Fundamentals of ag-Grid with Angular: Custom Components



  • Develop a CurrencyRendererComponent that uses Angular's CurrencyPipe to format a currency value.
  • Implement the agInit() lifecycle method to access the cell's value via the ICellRendererParams object.
  • Implement the refresh() lifecycle method. First, we'll return false and allow ag-Grid to create and destroy the renderer component when the cell value changes. Then, we'll let Angular's change detection handle re-rendering when the cell value changes and return true.
  • Register the custom component using the frameworkComponents input binding on the <ag-grid-angular> component.
  • Use the newly created currentRenderer for the cellRenderer property in the column definition.

I finished! On to the next chapter