Angular Markup

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}}"
[propertyName]="functionCallReturningAString()"

// boolean value
[propertyName]="true|false"
[propertyName]="{{Interpolated Value}}"
[propertyName]="functionCallReturningABoolean()"

// numeric value
[propertyName]="Numeric Value"
[propertyName]="functionCallReturningANumber()"

// function value
[propertyName]="functionName"
[propertyName]="functionCallReturningAFunction()"

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 [filter]="getSkillFilter()" private getSkillFilter():any { return SkillFilter; } // return an Object for filterParams [filterParams]="getCountryFilterParams()" 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"> <ag-grid-column headerName="Skills" [width]="125" [sortable]="false" [cellRenderer]="skillsCellRenderer" [filter]="getSkillFilter()"></ag-grid-column> <ag-grid-column headerName="Proficiency" field="proficiency" [width]="120" [cellRenderer]="percentCellRenderer" [filter]="getProficiencyFilter()"></ag-grid-column> </ag-grid-column>

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.