@for (item of data; track item) { }

	Document	Author	Created Date
	{{ item.name }}	{{ item.author }}	{{ item.date \| date }}

mode

simple

row

row-alt

The uxSelection directive can be used to allow items to easily be selected and deselected. This is particularly useful in tables where rows can be selected to perform actions on specific items. The uxSelection directive should be added to the container element, for example a table.

Each selectable item should be a child element with the uxSelectionItem directive applied to it.

Each selectable item will get a ux-selection-focused class applied when the item receives keyboard focus and a ux-selection-selected class when the item becomes selected. These can be used to customize the appearance of the items in their various states.

The following can be used to interact with and customize the behavior of the uxSelection directive.

Defines the items that should be selected. Defines the selection behavior. The following modes can be used:

simple - This allows clicking on an item to toggle its selected state. It also provides keyboard navigation using the arrow keys and toggling using the spacebar key.
row - This allows more complex selection behavior. Clicking on an item will select only that item and deselect all others. Multiple items can be selected by ctrl clicking on items, and groups of items can be selected by shift clicking. Keyboard navigation is also provided using the arrow keys and spacebar to toggle selection and ctrl and shift support is also available for multiple selection.
row-alt - This is similar to row mode, except that the cursor keys move the selection as well as the focus. Holding ctrl with the cursor keys allows the focus to be moved without affecting the selection.

Alternatively, custom selection behavior can be defined by defining a class which extends SelectionStrategy, and providing an instance of the custom class to this property. See below for details of the SelectionStrategy class.

Can be used to enabled/disable selection behavior. Can be used to enable/disable click selection on items. This can be used to manually control the selection of an item, for example, binding the selection state to a checkbox. Can be used to enable/disable keyboard navigation on items. Use this if you wish to provide custom keyboard controls for selection. The full set of selection items. Only needed if the full set of uxSelectionItems is not available, e.g. within a virtual scroll container.

This event will be triggered when there is a change to the selected items. It will contain an array of the currently selected items.

This function can be called to select all uxSelectionItem elements within the directive. This function can be called to deselect all uxSelectionItem elements within the directive.

The following can be used to interact with and customize the behavior of the uxSelectionItem directive.

Defines the data associated with this item. Defines if this specific item can be selected. Defines whether or not this item is currently selected. Whether aria-selected is added to the host element.

This event will be triggered when this item becomes selected. The event will contain the boolean value representing its selected state.

This function can be called to select this item. This function can be called to deselect this item.

The SelectionStrategy class, which can be subclassed to provide custom selection behavior, has the following interface:

Called when the mousedown event occurs on the item representing data. Override this function to provide custom behavior. Called when the click event occurs on the item representing data. Override this function to provide custom behavior. Called when the keydown event occurs on the item representing data. Override this function to provide custom behavior. Select the item(s). Toggle the selected state of the item(s). Deselect the item(s). Select all items. Deselect all items.

The following code can be used to create the example above: