button-toggle-input

Button Toggle Selection Component

This is a Button Toggle

Usage

1. npm i button-toggle-input

2. Import ButtonToggleInputModule

3. Use the selector in your template

     <app-button-toggle-input
       [formControl]="selectionControl"
       [data]="data"
       [toolTips]="tooltip1.checked"
       [fullWidth]="width1.value"
       [noBorder]="!border1.checked"
       [iconSuffix]="suffix1.checked"
     ></app-button-toggle-input>

Input Properties

Input	Type	Description	Default
data	ListItem[] | string[]	An array of ListItem objects or strings that define the toggle options. If passed as strings, each string is used as both the value and label.	(Required)
multiple	boolean	If true, allows multiple selections.	false
toolTips	boolean	If true, displays tooltips on each toggle item.	false
toolTipPosition	TooltipPosition	The position of the tooltips ('above', 'below', 'left', 'right'). Imported from @angular/material/tooltip.	"above"
toolTipShowDelay	number	The delay in milliseconds before the tooltip is displayed.	1
color	string	The base color of the toggle buttons, e.g., a hex code.	"#333333"
lightColor	string	The color used for the toggle button's light areas (e.g., background when not selected).	"white"
darkColor	string	The color used for the toggle button's dark areas (e.g., text when selected).	"black"
noBorder	boolean	If true, removes the border from the toggle buttons.	false
iconPrefix	boolean	If true, displays the icon before the label. Ignored if iconSuffix is also true.	true
iconSuffix	boolean	If true, displays the icon after the label. When true, iconPrefix is automatically set to false.	false
fullWidth	boolean	If true, makes the toggle buttons take up the full width of their container.	false

Usage Example

import { Component } from '@angular/core';

interface ListItem {
  value: string;
  label: string;
  icon?: string;
}

@Component({
  selector: 'app-example',
  template: `
    <app-button-toggle-input
      [data]="items"
      [(ngModel)]="selectedItems"
      [multiple]="true"
      [toolTips]="true"
      toolTipPosition="below"
      color="#007bff"
      lightColor="#f0f8ff"
      darkColor="white"
      [noBorder]="true"
      [iconPrefix]="true"
      [fullWidth]="true"
    >
    </app-button-toggle-input>
    <p>Selected Items: {{ selectedItems | json }}</p>
  `
})
export class ExampleComponent {
  items: ListItem[] = [
    { value: 'item1', label: 'Item 1', icon: 'fa fa-check' },
    { value: 'item2', label: 'Item 2', icon: 'fa fa-times' },
    { value: 'item3', label: 'Item 3' }
  ];
  selectedItems: string[] = [];
}

Form Integration (ControlValueAccessor)

The component implements the ControlValueAccessor interface, making it easy to integrate with Angular forms:

writeValue(value: any): void: Sets the value of the control. registerOnChange(fn: any): void: Registers a callback function to be called when the control's value changes. registerOnTouched(fn: any): void: Registers a callback function to be called when the control is touched. setDisabledState(isDisabled: boolean): void: Disables or enables the control. The component uses a FormControl internally to manage the selected values. The selected values are emitted through the onChange callback.

Sample Data Structure

  const groupOptions: ListItem[] = [
      { label: 'Sample', value: 'test', icon: 'add' },
      { value: 'list', icon: 'list' },
      { value: 'list', label: 'me' },
      { label: '', value: 'grid', icon: 'grid_on', tootTip: 'Grid View'},
    ]

    or

    const groupOptions = ['store', 'data', 'type', 'expiresIn', 'options']