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:

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:

<ui-button-toggle-group [options]="options" [value]="selectedValue" [multiple]="isMultiple"
  (valueChange)="onToggleGroupValueChange($event)"
></ui-button-toggle-group>

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.