Selection (Single)

Depending on the use case, you might want to restrict the user to only allow single selection in a datagrid. If you haven't done so, please read the previous section on general selection first.

In the following example, we simply display the name of the selected user, but since we have access to the full objects, we could perform any operation we want on it.

Selected user: No user selected. {{singleSelected.name}}

User ID Name Creation date Favorite color {{user.id}} {{user.name}} {{user.creation | date}} {{users.length}} users

We also offer an [clrDgRowSelection] input to allow users to click anywhere on a row to select it. We however recommend against using this feature unless you have a very specific use case that requires it, due to the various accessibility concerns it raises (table rows cannot be actionable elements at the same time). We are considering deprecating this feature in the future if it continues to hinder accessibility.

Do not use [clrDgRowSelection] if your row contains any type of clickable elements (buttons, links, inputs, expand caret, single-row actions, etc.). Doing so would produce invalid HTML in the form of nested buttons, which will break in various unpredictable ways depending on the browser.

Selected user: No user selected. {{rowSelected.name}}

User ID Name Creation date Favorite color {{user.id}} {{user.name}} {{user.creation | date}} {{users.length}} users

If you need to listen to when the selection changes, you can use Angular's two way binding to listen to the (clrDgSingleSelectedChange) event: