illirya-ui-button-toggle-group
v0.0.1
Published
A collection of reusable button toggle group components for Angular applications.
Downloads
4
Maintainers
Readme
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.