Every feature of ag-Grid is available when using the ag-Grid Angular Component. The Angular Component wraps the functionality of ag-Grid, it doesn't duplicate, so there will be no difference between core ag-Grid and Angular ag-Grid when it comes to features.
In your package.json file, specify dependency on ag-grid AND ag-grid-angular.
The ag-grid package contains the core ag-grid engine and the ag-grid-angular
contains the Angular component.
You will then be able to access ag-Grid inside your application:
Which you can then use as a dependency inside your module:
You will need to include the CSS for ag-Grid, either directly inside your html page, or as part of creating your bundle if bundling. The following shows referencing the css from your web page:
You can configure the grid in the following ways through Angular:
Notice that the grid has its properties marked as immutable. Hence for object properties, the object reference must change for the grid to take impact. For example, rowData must be a new list of data for the grid to be informed to redraw.
AfterViewInitinstead before using the API
In order for ag-Grid to be able to use your Angular Components, you need to provide them in the top level module:
You can then use these components as editors, renderers or filters. For example, to use an Angular Component as a Cell Renderer, you would do the following:
The example has ag-Grid configured through the template in the following ways:
The above is all you need to get started using ag-Grid in a Angular application. Now would be a good time to try it in a simple app and get some data displaying and practice with some of the grid settings before moving onto the advanced features of cell rendering and custom filtering.
There are a variety of ways to manage component communication in Angular (shared service, local variables
often need a simple way to let a "parent" component know that something has happened on a "child"
the simplest route is to use the
gridOptions.context to hold a reference to the parent,
child can then access.
Note that although we've used
componentParent as the property name here it can be anything -
point is that you can use the
context mechanism to share information between the
The "A Simple Example, using cell renderer's created from Angular Components" above illustrates this in the Child/Parent column:
There are many ways to build and/or bundle an Angular Application. In the Getting Started/Overview section we went through using Angular CLI to create an ag-Grid Angular application, but we also provide full working examples using either SystemJS, Webpack or Webpack 2 as part of the ag-grid-angular-example project on GitHub.
We document the main parts of these tools below, but please refer to the examples for more detail.
The example below shows a rich configuration of ag-Grid.
The above section details how to specify the Grid itself. To declare columns you can specify them as follows:
This example declares a simple Column Definition, specifying header name, field and width.
There are some simple rules you should follow when setting column properties via Markup:
You can set a Class or a Complex property in the following way:
To specify a Grouped Column, you can nest a column defintion:
In this example we have a parent Column of "IT Skills", with two child columns.
The example below shows the same rich grid as the example above, but with configuration done via Markup.
bower install ag-grid-enterprise
npm install ag-grid-enterprise
Download from Github
In your application, before instantiating the grid, you need to reference the included ag-grid-enterprise dependency:
Now you can go to interfacing to learn about accessing all the features of the grid, or take a look at more detailed documentation around specifics like cell renderer's, cell editors and filters using Angular.
If using Angular, VueJS, React or Aurelia then you will also need to reference the additional ag-Grid project for that framework. Details are provided the documentation for those frameworks.
If you want to use the Angular or React component of ag-Grid, then you have to use the commonjs distribution (not the bundled). You will also need to include the additional ag-Grid project for these components.
The table below summarises these details.
|Framework||Works with Bundled||Works with CommonJS||Extra Project|
Warning: if you are using the bundled version of the grid (/dist/ag-grid-js) then you must specify this directly, the main files specified in package.json and bower.json point to the commonjs versions of ag-Grid.
Below is a list of the examples demonstrating the different build tools, loading mechanisms and frameworks. You may not see the exact stack you want, but you can grab information from all the examples. Eg you might want to program React and Typescript, below you can see examples of React and Typescript, just not together.