button-toggle-input

v15.0.4

Published

8 days ago

This is an Angular Module containing Components/Services using Material

0High
0Medium
0Low

wavecoders

Button Toggle Input Component

Overview

The button-toggle-input library provides a comprehensive Material Design toggle button component that works seamlessly with Angular forms. It supports both single and multiple selection modes, customizable styling, tooltips, and various display options including icons, labels, and borders. The component implements Angular's ControlValueAccessor interface for seamless form integration.

Core Capabilities

🎯 Advanced Toggle Button Interface

Single/Multiple Selection: Support for both single selection and multi-select modes
Rich Display Options: Icons, labels, tooltips, and custom styling
Form Control Integration: Native Angular form control support with ControlValueAccessor
Material Design: Built on Angular Material button toggle foundation
Customizable Styling: Colors, borders, width, and icon positioning
Tooltip Support: Contextual tooltips with configurable positioning
Accessibility Ready: ARIA labels and keyboard navigation support

🔧 Features

✅ ControlValueAccessor Implementation - Works with Angular forms
✅ Material Design Integration - Uses Angular Material components
✅ Single & Multiple Selection - Flexible selection modes
✅ Icon Support - Material icons with prefix/suffix positioning
✅ Tooltip Integration - Contextual help with positioning options
✅ Custom Color Schemes - Light/dark colors and border control
✅ Full Width Option - Responsive width control
✅ Change Detection Optimized - OnPush change detection strategy
✅ Form Validation Support - Integrates with Angular validation

Key Benefits

| Feature | Description | |---------|-------------| | Flexible Selection | Support for single or multiple item selection | | Rich UI Options | Icons, labels, tooltips, and styling customization | | Form Integration | Seamless Angular form control integration | | Material Design | Consistent Material Design styling and behavior | | Performance Optimized | OnPush change detection for better performance | | Accessibility | Full ARIA support and keyboard navigation |

Demo Component (`ButtonToggleDemoComponent`)

The demo component showcases various toggle button configurations and demonstrates different use cases including icons-only, labels-only, and combined icon+label modes.

Usage

To use the demo component in your application:

<app-button-toggle-demo></app-button-toggle-demo>

The demo includes:

Icon-only mode: Toggle buttons with Material icons
Label-only mode: Toggle buttons with text labels
Combined mode: Toggle buttons with both icons and labels
Form controls: Reactive form integration examples
Dynamic data switching: Runtime data type changes
Enable/disable controls: Form control state management
Change detection logging: Console output for debugging

Summary

The button-toggle-input library provides a flexible, Material Design-compliant toggle button component with comprehensive form integration, customizable styling, and rich display options for Angular applications.

Quick Start Guide

Installation & Setup (2 minutes)

1. Import Module

// app.module.ts
import { ButtonToggleInputModule } from 'button-toggle-input';

@NgModule({
  imports: [
    ButtonToggleInputModule
  ]
})
export class AppModule { }

2. No Module Configuration Required

The ButtonToggleInputModule does not require global configuration. Components can be used immediately after module import.

Quick Examples

Example 1: Basic Single Selection

import { Component } from '@angular/core';
import { ListItem } from 'button-toggle-input';

@Component({
  selector: 'app-basic-toggle',
  template: `
    <app-button-toggle-input
      [formControl]="selectionControl"
      [data]="toggleOptions">
    </app-button-toggle-input>
    
    <div>Selected: {{ selectionControl.value }}</div>
  `
})
export class BasicToggleComponent {
  selectionControl = new FormControl();
  
  toggleOptions: ListItem[] = [
    { value: 'option1', label: 'Option 1', icon: 'home' },
    { value: 'option2', label: 'Option 2', icon: 'settings' },
    { value: 'option3', label: 'Option 3', icon: 'star' }
  ];
}

Example 2: Multiple Selection with Tooltips

import { Component } from '@angular/core';
import { ListItem } from 'button-toggle-input';

@Component({
  selector: 'app-multi-toggle',
  template: `
    <app-button-toggle-input
      [formControl]="multiControl"
      [data]="multiOptions"
      [multiple]="true"
      [toolTips]="true"
      toolTipPosition="below"
      [noBorder]="true"
      [fullWidth]="true">
    </app-button-toggle-input>
    
    <div>Selected Items: {{ multiControl.value | json }}</div>
  `
})
export class MultiToggleComponent {
  multiControl = new FormControl();
  
  multiOptions: ListItem[] = [
    { 
      value: 'read', 
      label: 'Read', 
      icon: 'visibility',
      tootTip: 'Read access to documents'
    },
    { 
      value: 'write', 
      label: 'Write', 
      icon: 'edit',
      tootTip: 'Write access to documents'
    },
    { 
      value: 'delete', 
      label: 'Delete', 
      icon: 'delete',
      tootTip: 'Delete access to documents'
    }
  ];
}

Example 3: Icon-Only Mode

import { Component } from '@angular/core';
import { ListItem } from 'button-toggle-input';

@Component({
  selector: 'app-icon-toggle',
  template: `
    <app-button-toggle-input
      [formControl]="iconControl"
      [data]="iconOptions"
      [iconPrefix]="true"
      [noBorder]="false">
    </app-button-toggle-input>
    
    <div>Selected: {{ iconControl.value }}</div>
  `
})
export class IconToggleComponent {
  iconControl = new FormControl();
  
  iconOptions: ListItem[] = [
    { value: 'grid', icon: 'grid_on', tootTip: 'Grid View' },
    { value: 'list', icon: 'list', tootTip: 'List View' },
    { value: 'chart', icon: 'bar_chart', tootTip: 'Chart View' }
  ];
}

Example 4: Custom Styled Toggle

import { Component } from '@angular/core';
import { ListItem } from 'button-toggle-input';

@Component({
  selector: 'app-styled-toggle',
  template: `
    <div class="toggle-container">
      <h3>View Options</h3>
      
      <app-button-toggle-input
        [formControl]="viewControl"
        [data]="viewOptions"
        color="#007bff"
        lightColor="#f0f8ff"
        darkColor="white"
        [fullWidth]="true">
      </app-button-toggle-input>
      
      <div class="result">
        Current view: {{ viewControl.value }}
      </div>
    </div>
  `,
  styles: [`
    .toggle-container {
      max-width: 400px;
      margin: 2rem auto;
      padding: 1rem;
      border: 1px solid #ddd;
      border-radius: 8px;
    }
    h3 {
      text-align: center;
      margin-bottom: 1rem;
      color: #333;
    }
    .result {
      margin-top: 1rem;
      text-align: center;
      font-weight: bold;
      color: #007bff;
    }
  `]
})
export class StyledToggleComponent {
  viewControl = new FormControl();
  
  viewOptions: ListItem[] = [
    { value: 'compact', label: 'Compact', icon: 'compress' },
    { value: 'comfortable', label: 'Comfortable', icon: 'aspect_ratio' },
    { value: 'spacious', label: 'Spacious', icon: 'open_in_full' }
  ];
}

Example 5: Dynamic Data with Validation

import { Component } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
import { ListItem } from 'button-toggle-input';

@Component({
  selector: 'app-dynamic-toggle',
  template: `
    <form [formGroup]="toggleForm">
      <app-button-toggle-input
        formControlName="category"
        [data]="categoryOptions"
        [multiple]="false"
        [toolTips]="true">
      </app-button-toggle-input>
      
      <app-button-toggle-input
        formControlName="features"
        [data]="featureOptions"
        [multiple]="true"
        [toolTips]="true">
      </app-button-toggle-input>
    </form>
    
    <div class="form-status">
      <div>Category Valid: {{ toggleForm.get('category')?.valid }}</div>
      <div>Features Valid: {{ toggleForm.get('features')?.valid }}</div>
      <div>Form Valid: {{ toggleForm.valid }}</div>
    </div>
  `,
  styles: [`
    form {
      display: flex;
      flex-direction: column;
      gap: 2rem;
      max-width: 500px;
      margin: 2rem auto;
    }
    .form-status {
      background: #f5f5f5;
      padding: 1rem;
      border-radius: 4px;
      font-family: monospace;
    }
  `]
})
export class DynamicToggleComponent {
  constructor(private fb: FormBuilder) {}
  
  toggleForm = this.fb.group({
    category: ['', Validators.required],
    features: [[], Validators.minLength(1)]
  });
  
  categoryOptions: ListItem[] = [
    { value: 'web', label: 'Web Application', icon: 'web' },
    { value: 'mobile', label: 'Mobile App', icon: 'phone_android' },
    { value: 'desktop', label: 'Desktop App', icon: 'computer' }
  ];
  
  featureOptions: ListItem[] = [
    { value: 'auth', label: 'Authentication', icon: 'security' },
    { value: 'notifications', label: 'Notifications', icon: 'notifications' },
    { value: 'offline', label: 'Offline Support', icon: 'wifi_off' },
    { value: 'analytics', label: 'Analytics', icon: 'analytics' }
  ];
}

Component API

Inputs

Outputs

Model Structures

ListItem Interface

export interface ListItemInterface {
  value: any;           // The value returned when this item is selected
  label?: string;       // Optional display label text
  icon?: string;        // Optional Material icon name
  tootTip?: string;     // Optional tooltip text (note: typo in original)
  selected?: string;    // Internal: marks item as selected
  disabled?: string;    // Internal: marks item as disabled
}

ListItem Class

export class ListItem implements ListItemInterface {
  constructor(
    public value = '',
    public label?: string,
    public icon?: string,
    public tootTip?: string,
    public selected?: string,
    public disabled?: string,
  ) {}

  static adapt(item?: any): ListItem {
    return new ListItem(
      item?.value,
      // Label: use provided label, or empty string if icon exists, or fallback to value
      (item?.label) ? item.label : (item?.icon) ? '' : item?.value,
      item?.icon,
      // Tooltip: use provided tooltip, or label if exists, or fallback to value
      (item?.tootTip) ? item.tootTip : (item?.label) ? item.label : item?.value,
      item?.selected,
      item?.disabled,
    );
  }
}

Usage Examples

// Basic list item
const basicItem = new ListItem('value1', 'Label 1');

// With icon
const iconItem = new ListItem('value2', 'Settings', 'settings');

// Using adapt method for flexible data
const adaptedItem = ListItem.adapt({
  value: 'option1',
  label: 'Option 1',
  icon: 'radio_button_checked',
  tootTip: 'Select this option'
});

// Array configurations
const toggleOptions: ListItem[] = [
  // String-only data (automatically converted)
  'option1',
  'option2',
  'option3',
  
  // Object configuration
  { value: 'custom1', label: 'Custom Option', icon: 'star' },
  { value: 'custom2', label: 'Another Option', icon: 'heart' },
  
  // Icon-only (no label)
  { value: 'icon1', icon: 'home', tootTip: 'Home View' },
  { value: 'icon2', icon: 'work', tootTip: 'Work View' }
];

// Complex configuration with all properties
const complexItem: ListItem = ListItem.adapt({
  value: 'complex-option',
  label: 'Complex Option',
  icon: 'settings',
  tootTip: 'This is a complex option with all features',
  selected: 'true',    // Pre-selected
  disabled: 'false'    // Not disabled
});

Form Integration (ControlValueAccessor)

The component implements Angular's ControlValueAccessor interface, making it fully compatible with both template-driven and reactive forms.

ControlValueAccessor Implementation

Methods Implemented

// writeValue(value: any): void
// Sets the value of the control
writeValue(value: any): void {
  // Handle incoming form control value
  // Update component state accordingly
}

// registerOnChange(fn: any): void
// Registers a callback for value changes
registerOnChange(fn: any): void {
  this.onChange = fn;
}

// registerOnTouched(fn: any): void
// Registers a callback for touch events
registerOnTouched(fn: any): void {
  this.onTouch = fn;
}

// setDisabledState(isDisabled: boolean): void
// Sets disabled state
setDisabledState?(isDisabled: boolean): void {
  this.disabled = isDisabled;
}

Form Integration Examples

Reactive Forms

import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-reactive-form-toggle',
  template: `
    <form [formGroup]="toggleForm">
      <app-button-toggle-input
        formControlName="selection"
        [data]="options"
        [multiple]="true">
      </app-button-toggle-input>
      
      <div class="form-errors" *ngIf="toggleForm.get('selection')?.errors">
        <div *ngIf="toggleForm.get('selection')?.hasError('required')">
          Selection is required
        </div>
        <div *ngIf="toggleForm.get('selection')?.hasError('minLength')">
          At least one option must be selected
        </div>
      </div>
    </form>
  `
})
export class ReactiveFormToggleComponent {
  toggleForm = new FormGroup({
    selection: new FormControl([], Validators.required)
  });
  
  options: ListItem[] = [
    { value: 'opt1', label: 'Option 1' },
    { value: 'opt2', label: 'Option 2' },
    { value: 'opt3', label: 'Option 3' }
  ];
}

Template-Driven Forms

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

@Component({
  selector: 'app-template-toggle',
  template: `
    <form #toggleForm="ngForm">
      <app-button-toggle-input
        [(ngModel)]="selectedValue"
        name="toggleSelection"
        [data]="options"
        [multiple]="false"
        required>
      </app-button-toggle-input>
      
      <div *ngIf="toggleForm.controls.toggleSelection?.invalid && toggleForm.controls.toggleSelection?.touched">
        Selection is required
      </div>
    </form>
  `
})
export class TemplateToggleComponent {
  selectedValue: any = null;
  
  options: ListItem[] = [
    { value: 'single1', label: 'Single Option 1' },
    { value: 'single2', label: 'Single Option 2' },
    { value: 'single3', label: 'Single Option 3' }
  ];
}

Form Control Methods

// Setting values programmatically
this.formControl.setValue(['option1', 'option2']); // For multiple mode
this.formControl.setValue('option1');              // For single mode

// Patching values
this.formControl.patchValue(['option1']);          // Partial update

// Resetting
this.formControl.reset();                          // Clear selection

// Getting current value
const currentValue = this.formControl.value;

// Checking validity
const isValid = this.formControl.valid;
const errors = this.formControl.errors;

// Setting custom errors
this.formControl.setErrors({ customError: 'Custom error message' });

Module Configuration