Overview
tng-button-toggle is a segmented control that implements ControlValueAccessor. You supply options (value, label, optional disabled). It supports single or multiple selection and optional allowDeselect. Form value is the selected value(s): T | null (single) or T[] (multiple).
Quick example
Basic (single)
<form [formGroup]="form">
<tng-button-toggle formControlName="view" [options]="viewOptions" />
</form>
viewOptions = [
{ value: 'list', label: 'List' },
{ value: 'grid', label: 'Grid' },
{ value: 'map', label: 'Map' },
];
form = new FormGroup({
view: new FormControl<string | null>('list'),
});
Features
options
Array of { value, label, disabled? }. value is string | number.
multiple / allowDeselect
[multiple]="true" for multi-select; allowDeselect lets the user clear the selection.
Slot hooks
slot: container, button, buttonActive, buttonInactive, buttonDisabled.