ToggleButtonGroup

´ Loading interactive demo...
<dt-toggle-button-group> <button dt-toggle-button-item value="1"> <dt-toggle-button-item-icon> <dt-icon name="agent"></dt-icon> </dt-toggle-button-item-icon> One </button> <button dt-toggle-button-item value="2"> <dt-toggle-button-item-icon> <dt-icon name="agent"></dt-icon> </dt-toggle-button-item-icon> Two </button> <button dt-toggle-button-item value="3"> <dt-toggle-button-item-icon> <dt-icon name="agent"></dt-icon> </dt-toggle-button-item-icon> Three </button> </dt-toggle-button-group> export class DefaultToggleButtonExampleComponent { } export class DefaultToggleButtonExampleComponent { }

Imports

You have to import the DtToggleButtonGroupModule when you want to use the <dt-toggle-button-group>:

@NgModule({
  imports: [
    DtToggleButtonGroupModule,
  ],
})
class MyModule {}

Initialization

The <dt-toggle-button-group> acts as a grouping container for all <dt-toggle-button-item> components. A <dt-toggle-button-item> cannot function without a group as it is the group that is managing the toggling state. The group can hold any content and is not limited to dt-toggle-button-items.

The <dt-toggle-button-item> can hold any content which will be rendered into the right hand side of the component. It also has a special selection for the icon on the left hand side:

  • <dt-toggle-button-item-icon> should be filled with a dt-icon which will be styled and rendered according to the toggle-button-group container.

Options & Properties

Toggle button group

Name Type Default Description
selectedItem DtToggleButtonItem<T> - Getter to access the currently selected DtToggleButtonItem<T> instance or null if none is selected.
value <T> null Getter to access the currently selected value.
@Output() change EventEmitter<DtToggleButtonChange<T>> - EventEmitter that fires every time the selection changes. DtToggleButtonChange is an interface for the following object signature: { source: DtToggleButtonItem<T>, value: T | null, isUserInput: boolean }.

Toggle button item

Name Type Default Description
@Input() selected boolean false Whether or not the DtToggleButtonItem is selected or not.
@Input() value <T> null Value of the DtToggleButtonItem.
@Input() tabIndex number 0 Sets the tabIndex of the DtToggleButtonItem. If the item is disabled, tabIndex will be set to -1 to remove it from the keyboard navigation.
@Input() disabled boolean false Disables the DtToggleButtonItem.
@Input() aria-label string - String that will be applied as an aria label on the DtToggleButtonItem.
@Input() aria-labelledby string - One or more DOM element ids that label the DtToggleButtonItem. If multiple values are given, please use a space separated list.
@Input() aria-describedby string - One DOM element id that describe the actions taken by selecting the DtToggleButtonItem.
@Output() change EventEmitter<DtToggleButtonChange<T>> - EventEmitter that fires when the selection of the DtToggleButtonItem changes.
focus() function - Function to programatically call focus on a DtToggleButtonItem.
select() function - Function to programmatically select on a DtToggleButtonItem.
deselect() function - Function to programmatically deselect on a DtToggleButtonItem.

Examples

´ Loading interactive demo...
<dt-toggle-button-group #group1> <button dt-toggle-button-item *ngFor="let item of items" [value]="item"> <dt-toggle-button-item-icon> <dt-icon name="agent"></dt-icon> </dt-toggle-button-item-icon> {{item}} </button> </dt-toggle-button-group> <div style="margin-top: 16px;"> <button dt-button (click)="addItem()">Add item</button> <button dt-button (click)="removeItem()">Remove item</button> </div> <div style="margin-top: 16px;"> Current value: "{{group1.value}}" </div> export class DynamicItemsToggleButtonExampleComponent { items: number[] = [1, 2, 3]; addItem(): void { let newNumber = this.items[this.items.length - 1] + 1; if (isNaN(newNumber)) { newNumber = 0; } this.items.push(newNumber); } removeItem(): void { this.items.pop(); } }
Current value: "{{group1.value}}"
export class DynamicItemsToggleButtonExampleComponent { items: number[] = [1, 2, 3]; addItem(): void { let newNumber = this.items[this.items.length - 1] + 1; if (isNaN(newNumber)) { newNumber = 0; } this.items.push(newNumber); } removeItem(): void { this.items.pop(); } }