@angular/aria/toolbar

ToolbarWidget

directive

A widget within a toolbar.

API

    
      class ToolbarWidget<V> implements OnInit ,OnDestroy {  readonly element: HTMLElement;  readonly @Input() id: InputSignal<any>;  readonly @Input() disabled: InputSignalWithTransform<boolean, unknown>;  readonly hardDisabled: Signal<boolean>;  readonly @Input() value: InputSignal<V>;  readonly active: Signal<boolean>;  readonly selected: () => boolean;}

element

HTMLElement

A reference to the host element.

id

InputSignal<any>

A unique identifier for the widget.

disabled

InputSignalWithTransform<boolean, unknown>

Whether the widget is disabled.

hardDisabled

Signal<boolean>

Whether the widget is 'hard' disabled, which is different from aria-disabled. A hard disabled widget cannot receive focus.

value

InputSignal<V>

The value associated with the widget.

active

Signal<boolean>

Whether the widget is currently active (focused).

selected

() => boolean

Whether the widget is selected (only relevant in a selection group).

ngOnInit

void

@returnsvoid

ngOnDestroy

void

@returnsvoid

The ngToolbarWidget directive should be applied to any native HTML element that acts as an interactive widget within an ngToolbar or ngToolbarWidgetGroup. It enables keyboard navigation and selection within the toolbar.

<button ngToolbarWidget value="action-id" [disabled]="isDisabled">  Perform Action</button>

API

Description