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 from all built-in features for this case: sorting based on the natural comparison, filtering using either of the built-in filters, 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 or filterable.

By default, bound columns are assumed to contain string-like contents and the user is presented with the normal string filter. If you know that the contents of the column will be numeric, you can instead use the built-in numeric range filter by adding [clrDgColType]="'number'". You can see an example of this in the "Wins" column.

User ID Name Creation date Pokemon Favorite color Wins {{user.id}} {{user.name}} {{user.creation | date}} {{user.pokemon.name}} {{user.wins}} {{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.