Binding model properties to columns

For an easy setup of datagrid column features, you can simply specify the property to bind it to in your model. When you do, the column will benefit for all built-in features for this case: sorting based on the natural comparison, filtering based on string value, and anything else we might add in the future. You can bind to as deep a property as you want in your model, using a standard dot-separated syntax: [clrDgField]="'my.deep.property'"

You can also see in the following example how every feature we offer is always opt-in: we did not declare any binding on the "User ID" column, which means it is not sortable of filterable.

User ID Name Creation date Pokemon Favorite color {{user.id}} {{user.name}} {{user.creation | date}} {{user.pokemon.name}} {{users.length}} users
In this example, the [clrDgField] input is a hard-coded string, so it needs to be quoted twice: [clrDgField]="'name'".
Another way to write this would be clrDgField="name", without having the extra quotes, but we do not recommend this. In particular, this leaves a potentially unwanted attribute on the element, whereas the previous syntax only adds a property to the corresponding Javascript object.