This section provides key information for configuring and interacting with a grid.
Grid Options
The grid is configure via Inputs on the ag-grid-angular
component. Properties consist of simple types, arrays, complex objects and callback functions.
<ag-grid-angular
// Set boolean properties
pagination
// Bind property / callback to component
[columnDefs]="columnDefs"
[getRowHeight]="myGetRowHeight"
</ag-grid-angular>
Updating Grid Options
It is a common requirement to update a grid option after the grid has been created. For example, you may want to change rowHeight
via an application toggle.
Simply update the bound property and the grid will respond to the new value. In this example all the rows will be redrawn with the new height.
<ag-grid-angular
[rowHeight]="rowHeight"
</ag-grid-angular>
updateHeight() {
this.rowHeight = 50;
}
Properties can also be updated by calling either api.setGridOption
or api.updateGridOptions
.
// update the rowHeight
api.setGridOption('rowHeight', 50);
Initial Grid Options
A small number of Grid Options do not support updating their value. Their value is only read during the initial setup of the grid. These options are marked as Initial
on the Options Reference. For these properties the grid must be destroyed and re-created for the new value to take effect.
Not all Grid Options support updates. These are marked as Initial.
For a full list of options see: Options Reference.
Grid Events
As a user interacts with the grid events will be fired to enable your application to respond to specific actions.
To listen to an event pass your event handler to the relevant Output
property on the ag-grid-angular
component.
onCellClicked(event: CellClickedEvent) {
console.log("Cell was clicked")
}
<ag-grid-angular (cellClicked)="onCellClicked($event)">
TypeScript users can take advantage of the events' interfaces. Construct the interface name by suffixing the event name with Event
. For example, the cellClicked
event uses the interface CellClickedEvent
. All events support TypeScript Generics.
For a full list of events see: Grid Events.
Grid API
The api can be accessed from the AgGridAngular
component via a @ViewChild
decorator from within your component. This will be defined after ngAfterViewInit
has run.
// Add a template reference to the grid
<ag-grid-angular #myGrid />
// Select grid via template reference
@ViewChild('myGrid') grid!: AgGridAngular;
// Access the api off the grid
onClick() { this.grid.api.deselectRows() }
The api
is also provided on the params for all grid events and callbacks. The first event fired is the gridReady
event and that can be used to store a reference to the api.
<ag-grid-angular (gridReady)="onGridReady($event)" />
private api!: GridApi;
onGridReady = (event: GridReadyEvent) => {
// Store the api for later use
this.api = event.api;
}
For a full list of api methods see: Grid API.
Grid State
As a user interacts with the grid they may change state such as filtering, sorting and column order. This state is independent of the configuration and to provide save and restore capabilities the grid enables applications to save / restore this state.
For a full list of the state properties see: Grid State.
Grid Lifecycle
When working with AG Grid it is a common requirement to perform actions when the grid is first initialised, when data is first rendered and when the grid is about to be destroyed.
For full details about how to interact with the grid at these key moments see: Grid Lifecycle.