A toolbar widget container for a group of interactive widgets, such as buttons or radio groups. It provides a single point of reference for keyboard navigation and focus management. It supports various orientations and disabled states.
API
class Toolbar<V> { readonly element: HTMLElement; readonly textDirection: WritableSignal<Direction>; readonly @Input() orientation: InputSignal<"vertical" | "horizontal">; @Input() softDisabled: InputSignalWithTransform<boolean, unknown>; readonly @Input() disabled: InputSignalWithTransform<boolean, unknown>; readonly @Input() wrap: InputSignalWithTransform<boolean, unknown>; readonly @Input() @Output('valuesChange') values: ModelSignal<V[]>;}
element
HTMLElementA reference to the host element.
textDirection
WritableSignal<Direction>Text direction.
orientation
InputSignal<"vertical" | "horizontal">Whether the toolbar is vertically or horizontally oriented.
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.
disabled
InputSignalWithTransform<boolean, unknown>Whether the toolbar is disabled.
wrap
InputSignalWithTransform<boolean, unknown>Whether focus should wrap when navigating.
values
ModelSignal<V[]>The values of the selected widgets within the toolbar.
Description
A toolbar widget container for a group of interactive widgets, such as buttons or radio groups. It provides a single point of reference for keyboard navigation and focus management. It supports various orientations and disabled states.
<div ngToolbar orientation="horizontal" [wrap]="true"> <button ngToolbarWidget value="save">Save</button> <button ngToolbarWidget value="print">Print</button> <div ngToolbarWidgetGroup [(value)]="selectedAlignment"> <button ngToolbarWidget value="left">Left</button> <button ngToolbarWidget value="center">Center</button> <button ngToolbarWidget value="right">Right</button> </div></div>