buttons-toggle-selection

Button Toggle Selection Component

This Angular component (ListDisplaySelectionComponent) is responsible for displaying and managing a list of items with selection capabilities.

Usage

Input Properties

• multiple: boolean: Indicates if multiple selections are allowed.
• toolTipPosition: 'below' | 'above' | 'left' | 'right': Position of the tooltip for the selection component.
• data: ListItem[]: Array of ListItem objects for display.
• selected?: string|null: Currently selected item.

Usage Example

Lifecycle Hooks Implemented

ControlValueAccessor: Provides control and value accessor for Angular forms.

Setup Data Structure

Model to use - ListItem

• value: any
• label?: string
• icon?: string
• tootTip?: string

Sample Data

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']

Sample Component Usage

<app-list-display-selection
  [formControl]="selectedDisplay"
  [data]="groupOptions"
></app-list-display-selection>