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.
[(clrDgSelected)]
,
add a [(clrDgSingleSelected)]
two-way binding on the datagrid
itself, to have access to the currently selected item. Note that by setting this value
yourself, you can dynamically select an element if you need to.
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}}
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.
[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}}
If you need to listen to when the selection changes, you can use Angular's two way binding to listen to the (clrDgSingleSelectedChange)
event: