• Overview
@angular/aria/grid

The container for a grid. It provides keyboard navigation and focus management for the grid's rows and cells. It manages the overall behavior of the grid, including focus wrapping, selection, and disabled states.

API

    
      class Grid implements OnDestroy {}

element

HTMLElement

A reference to the host element.

textDirection

WritableSignal<Direction>

Text direction.

enableSelection

InputSignalWithTransform<boolean, unknown>

Whether selection is enabled for the grid.

disabled

InputSignalWithTransform<boolean, unknown>

Whether the grid is disabled.

softDisabled

InputSignalWithTransform<boolean, unknown>

Whether to allow disabled items to receive focus. When true, disabled items are focusable but not interactive. When false, disabled items are skipped during navigation.

focusMode

InputSignal<"roving" | "activedescendant">

The focus strategy used by the grid.

  • roving: Focus is moved to the active cell using tabindex.
  • activedescendant: Focus remains on the grid container, and aria-activedescendant is used to indicate the active cell.

rowWrap

InputSignal<"continuous" | "loop" | "nowrap">

The wrapping behavior for keyboard navigation along the row axis.

  • continuous: Navigation wraps from the last row to the first, and vice-versa.
  • loop: Navigation wraps within the current row.
  • nowrap: Navigation stops at the first/last item in the row.

colWrap

InputSignal<"continuous" | "loop" | "nowrap">

The wrapping behavior for keyboard navigation along the column axis.

  • continuous: Navigation wraps from the last column to the first, and vice-versa.
  • loop: Navigation wraps within the current column.
  • nowrap: Navigation stops at the first/last item in the column.

multi

InputSignalWithTransform<boolean, unknown>

Whether multiple cells in the grid can be selected.

selectionMode

InputSignal<"follow" | "explicit">

The selection strategy used by the grid.

  • follow: The focused cell is automatically selected.
  • explicit: Cells are selected explicitly by the user (e.g., via click or spacebar).

tabIndex

InputSignal<undefined>

The tabindex of the grid.

activeDescendant

Signal<any>

The ID of the active descendant in the grid.

ngOnDestroy

void
@returnsvoid

scrollActiveCellIntoView

void

Scrolls the active cell into view.

@paramoptionsScrollIntoViewOptions
@returnsvoid

Description

The container for a grid. It provides keyboard navigation and focus management for the grid's rows and cells. It manages the overall behavior of the grid, including focus wrapping, selection, and disabled states.

<table ngGrid [multi]="true" [enableSelection]="true">
  @for (row of gridData; track row) {
    <tr ngGridRow>
      @for (cell of row; track cell) {
        <td ngGridCell [disabled]="cell.disabled">
          {{cell.value}}
        </td>
      }
    </tr>
  }
</table>
Jump to details