Fundamentals of ag-Grid with Angular

Row Selection


  • Demonstrate the behavior of row selection in ag-Grid.
  • Enabling row selection using the rowSelection input binding on the <ag-grid-angular> component.
  • Invoking a method in the component's class via the selectionChange output binding.
  • Enabling checkbox selection in a column definition.
  • Get reference to the currently selected row.


The goal of this chapter was to get started with ag-Grid, and to introduce some of the features and functionality of ag-Grid.

We covered:

  1. Getting Started and sorting
  2. Filtering
  3. The Grid API
  4. The Column API
  5. Row Selection

Sorting Summary

  • Install ag-Grid into your Angular project.
  • Learn the basics of column definitions.
  • Learn the basics of the ag-grid-angular component.
  • Set the sortable flag in the column definition to true to enable column sorting.

Filtering Summary

  • Using ag-Grid's provided filters.
  • Text filtering is the default filter.
  • Number filtering enables us to filter by numeric values.
  • The values in our row model must be JavaScript Number() values for number filtering to work.

Grid API Summary

  • Programmatically access and control the grid using the GridApi.
  • Access the GridApi via a template refence exposed on the <ag-grid-angular> component.
  • Get access to the GridApi via the gridReady output binding.
  • Demonstration of Grid API functionality, such as: row selection, sorting, and exporting data to a CSV file.

Column API Summary

  • Programmically access and control columns in teh grid using the ColumnApi.
  • Access the ColumnApi via the gridReady output binding.
  • Get reference to a specific column via the column's key.
  • Toggle the visibility of a column using the Column API.