API reference
The headless surface is a pair: tngButtonToggleGroup owns focus and selection, while tngButtonToggle owns the individual button state hooks.
Group attachment
html
<div
tngButtonToggleGroup
type="single"
[tngButtonToggleValue]="density()"
(valueChange)="onDensityChange($event)"
>
<button tngButtonToggle tngButtonToggleValue="compact">Compact</button>
<button tngButtonToggle tngButtonToggleValue="comfortable">Comfortable</button>
</div>
| Input / output | Type | Details |
|---|---|---|
type | 'single' | 'multiple' | Switches between radio-style single selection and pressed-button multi selection. |
tngButtonToggleValue, value | string | number | null | Controlled single selected value. |
tngButtonToggleValues, values | readonly (string | number)[] | Controlled multi-select values. |
allowEmpty | boolean | Allows a single-select group to clear its selection. |
orientation | 'horizontal' | 'vertical' | Changes keyboard axis and reflected aria-orientation. |
activation | 'auto' | 'manual' | Controls whether arrow key focus movement also commits selection. |
valueChange, valuesChange | Angular outputs | Emit controlled-state updates for single and multiple groups. |
toggleChange, focusChange | Angular outputs | Emit richer metadata for analytics, focus tracking, and instrumentation. |
tngButtonToggle
Each item is a real <button> with value, disabled state, and group-aware ARIA bindings.
Item attachment
html
<button
tngButtonToggle
tngButtonToggleValue="bold"
>
Bold
</button>
| Input / host state | Details |
|---|---|
tngButtonToggleValue, value | Stable identity used by the group selection model. |
pressed | Standalone pressed state when the button is used outside a group. |
disabled | Disables the button directly or inherits disabled state from the group. |
data-selected, data-state | Primary styling hooks for active and inactive visuals. |
data-focused | Roving-focus marker for group-driven focus movement. |
aria-pressed, aria-checked | Automatically chosen based on standalone use, single-select groups, and multi-select groups. |
Selection events
Prefer the group-level outputs when multiple items participate in the same decision. Those outputs already include the next value set and the trigger source.