• Overview
@angular/aria/grid

GridCellWidget

directive

Represents an interactive element inside a GridCell. It allows for pausing grid navigation to interact with the widget.

API

    
      class GridCellWidget {  readonly element: HTMLElement;  readonly active: Signal<any>;  readonly @Input() id: InputSignal<any>;  readonly @Input() widgetType: InputSignal<"simple" | "complex" | "editable">;  readonly @Input() disabled: InputSignalWithTransform<boolean, unknown>;  readonly @Input() focusTarget: InputSignal<HTMLElement | ElementRef<any> | undefined>;  readonly @Output() onActivate: OutputEmitterRef<KeyboardEvent | FocusEvent | undefined>;  readonly @Output() onDeactivate: OutputEmitterRef<KeyboardEvent | FocusEvent | undefined>;  readonly @Input() tabindex: InputSignal<number | undefined>;  readonly isActivated: Signal<boolean>;  activate(): void;  deactivate(): void;}
    
    

element

HTMLElement

A reference to the host element.

active

Signal<any>

Whether the widget is currently active (focused).

id

InputSignal<any>

A unique identifier for the widget.

widgetType

InputSignal<"simple" | "complex" | "editable">

The type of widget, which determines how it is activated.

disabled

InputSignalWithTransform<boolean, unknown>

Whether the widget is disabled.

focusTarget

InputSignal<HTMLElement | ElementRef<any> | undefined>

The target that will receive focus instead of the widget.

onActivate

OutputEmitterRef<KeyboardEvent | FocusEvent | undefined>

Emits when the widget is activated.

onDeactivate

OutputEmitterRef<KeyboardEvent | FocusEvent | undefined>

Emits when the widget is deactivated.

tabindex

InputSignal<number | undefined>

The tabindex override.

isActivated

Signal<boolean>

Whether the widget is activated.

activate

void

Activates the widget.

@returnsvoid

deactivate

void

Deactivates the widget.

@returnsvoid

Description

Represents an interactive element inside a GridCell. It allows for pausing grid navigation to interact with the widget.

When the user interacts with the widget (e.g., by typing in an input or opening a menu), grid navigation is temporarily suspended to allow the widget to handle keyboard events.

<td ngGridCell>  <button ngGridCellWidget>Click Me</button></td>
Jump to details