Components

If you are using the Angular component version of the grid, it is then possible to customise the internals of the grid with Angular components. For example you can use a component to customise the contents of a cell.

In order for ag-Grid to be able to use your Angular components, you need to provide them in the top level module:

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        RouterModule.forRoot(appRoutes),
        AgGridModule.withComponents(
            [
                SquareComponent,
                CubeComponent,
                // ...other components

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:

let colDefs = [
    {
        headerName: "Square Component",
        field: "value",
        cellRendererFramework: SquareComponent,
        editable:true,
        colId: "square",
        width: 175
    },
    ...other column definitions
]

Please see the relevant sections on cell renderers, cell editors and filters for configuring and using Angular components in ag-Grid.

The example has ag-Grid configured through the template in the following ways:

// notice the grid has an id called agGrid, which can be used to call the API
<ag-grid-angular #agGrid style="width: 100%; height: 350px;" class="ag-theme-alpine"

    // items bound to properties on the controller
    [gridOptions]="gridOptions"
    [columnDefs]="columnDefs"
    [showToolPanel]="showToolPanel"
    [rowData]="rowData"

    // boolean values 'turned on'
    animateRows
    pagination

    // simple values, not bound
    rowHeight="22"
    rowSelection="multiple"

    // event callbacks
    (modelUpdated)="onModelUpdated()"
    (cellClicked)="onCellClicked($event)"
    (cellDoubleClicked)="onCellDoubleClicked($event)">

</ag-grid-angular>

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 cellRendering and custom filtering.

Child to Parent Communication

There are a variety of ways to manage component communication in Angular (shared service, local variables etc), but you often need a simple way to let a "parent" component know that something has happened on a "child" component. In this case the simplest route is to use the gridOptions.context to hold a reference to the parent, which the child can then access.

// in the parent component - the component that hosts ag-grid-angular and specifies which angular components to use in the | grid
constructor() {
    this.gridOptions = <GridOptions>{
        context: {
            componentParent: this
        }
    };
    this.gridOptions.rowData = this.createRowData();
    this.gridOptions.columnDefs = this.createColumnDefs();
}

// in the child component - the angular components created dynamically in the grid
// the parent component can then be accessed as follows:
this.params.context.componentParent

Note that although we've used componentParent as the property name here it can be anything - the main point is that you can use the context mechanism to share information between the components.

The "A Simple Example, using CellRenderers created from Angular Components" above illustrates this in the Child/Parent column: