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.
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>