ButtonToggleGroup


Overview

The ui-button-toggle-group component is a custom Angular component that allows users to toggle options in a button group. It supports both single and multiple selection modes.

Installation

Install the library using npm:

``
npm install illyria-ui-button-togle-group
`

Usage


To use the ui-button-toggle-group component in your Angular application, follow these steps:

- Import the ButtonToggleGroupComponent in your module:

`typescript
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {ButtonToggleGroupModule} from "./button-toggle-group.module";

@NgModule({
declarations: [ButtonToggleGroupModule],
imports: [CommonModule],
exports: [ButtonToggleGroupComponent],
})
export class SharedModule {
}
`
- In your component template, use the ui-button-toggle-group component:
`html
(valueChange)="onToggleGroupValueChange($event)"
>
`

Inputs


The ui-button-toggle-group component accepts the following input properties:

- options (string[]): An array of options to display in the button group.
- value (string | string[]): The currently selected value(s). For single selection, provide a string. For multiple selection, provide an array of strings.
- multiple (boolean): Set this to true to allow multiple selections, or false for single selection mode. Default is false.

Outputs

The ui-button-toggle-group component emits the following output event:

- valueChange (string | string[]): This event is emitted whenever the selected value(s) change. In single selection mode, it emits a single string value. In multiple selection mode, it emits an array of strings.

Methods

The ui-button-toggle-group component has the following method:

- onOptionSelected`(option: string): void: This method is called when an option is selected or deselected. It handles the selection logic based on the multiple attribute and emits the appropriate output event.