Fundamentals of ag-Grid with Angular: Data

Infinite Row Model


  • Displaying and rendering huge amounts of data in ag-Grid, or even in the browser, is expensive.
  • Streaming chunks of data into the grid by leveraging Infinite Row Model.
  • Enabling the infinite row model mode via the rowModelType input binding on the <ag-grid-angular> component.
  • Setting the block size for caching of data in the grid using the cacheBlockSize input binding.
  • Setting the number of rows the user can initially scroll to via the infiniteInitialRowCount input binding.
  • Defining the IDataSource object for fetching rows.


The goal of this chapter was to understand client-side data with ag-Grid.

We covered:

  • Binding simple data to the grid.
  • Displaying asynchronous data using Angular and RxJS.
  • Using value getters and cell rendering for displaying complex data and customizing the display of data.
  • Three methods for updating data in the grid.
  • Using delta row data to efficiently add, remove, and update data in the grid.
  • Leveraging the infinite-row model for streaming data chunks into the grid.

Simple Data Summary

  • Bind static data to ag-Grid with Angular using the rowData input binding.
  • Defining columns and specifying the field property.
  • Using dot-notation to access nested objects and data.

Asynchronous Data Summary

  • Displaying data that is fetched asynchronously in ag-Grid.
  • Streaming data into the grid using RxJS and Angular.

Value Getter

  • The valueGetter property in a column definition enables us to define an expression or function for accessing data for the specified column.
  • The valueGetter function accepts the ValueGetterParams object, which among other things, provides us with the data for each row in the grid.
  • We can return a string from the valueGetter function that is used for each row in the specified column.
  • Value getters are a method for customizing the formatting and display of data in the grid.

Updating Data

  • Using an RxJS Subject we can stream updates to data into ag-Grid with Angular.
  • Using the setRowData() method in the Grid API we can update all of the data that is displayed in the grid.
  • Using a RowDataTransaction object that is provided to the updateRowData() method in the Grid API we can instruct the grid to add, remove or update data in bulk.

Cell Rendering

  • Using the cellRenderer property in a column definition for specifying a function that renders each cell.
  • The cellRenderer function is invoked with a parameter object containing, among many things, the value for each cell to be rendered.
  • We can use cell rendering to display HTML element such as images in a grid.

Delta Row Data

  • Learn the basics of immutability in Angular.
  • Enable the delta row data model using the deltaRowDataModel input binding on the <ag-grid-angular> component.
  • Provding a function for determing the a row node unique identifying via the getRowNodeId input binding for determing the changes to immutable data.
  • Inplementing immutable data using NgRx, a redux inspired library for Angular.