You can create Grids either programatically (with pure JavaScript/Typescript/Components), or declare them via declaratively with markup.

Column Definition

<ag-grid-column headerName="Name" field="name" [width]="150"></ag-grid-column>

This example declares a simple Column Definition, specifying header name, field and width.

Setting Column Properties

There are some simple rules you should follow when setting column properties via Markup:

// string value
propertyName="String Value"
[propertyName]="'String Value'"
[propertyName]="{{Interpolated Value}}"

// boolean value
[propertyName]="{{Interpolated Value}}"

// numeric value
[propertyName]="Numeric Value"

// function value

Setting a Class or a Complex Value

You can set a Class or a Complex property in the following way:

// return a Class definition for a Filter

private getSkillFilter(): any {
    return SkillFilter;

// return an Object for filterParams

private getCountryFilterParams():any {
    return {
        cellRenderer: this.countryCellRenderer,
        cellHeight: 20

Grouped Column Definition

To specify a Grouped Column, you can nest a column defintion:

<ag-grid-column headerName="IT Skills">

In this example we have a parent Column of "IT Skills", with two child columns.

Example: Rich Grid using Markup

The example below shows the same rich grid as the example above, but with configuration done via Markup.