@teenageinterface/select NPM

Select Component

The Select component is a customizable dropdown component that allows single or multiple selections. It supports dynamic options, keyboard navigation, and adaptive dropdown positioning.

Installation

Ensure that you have installed the @teenageinterface/select library in your Angular project. If not, you can add it using:

npm install @teenageinterface/select

Usage

Import the SelectComponent into your Angular application:

import { SelectComponent } from '@teenageinterface/select';

@Component({
  selector: 'app-select-example',
  template: `
    <tiSelect 
      [options]="options" 
      [placeholder]="'Choose an option'" 
      [multiSelect]="true" 
      [selectedIds]="selectedValues" 
      (selectionChange)="onSelectionChange($event)">
    </tiSelect>
  `,
})
export class SelectExampleComponent {
  options = [
    { value: 1, title: 'Option 1' },
    { value: 2, title: 'Option 2' },
    { value: 3, title: 'Option 3' },
  ];
  selectedValues: (string | number)[] = [1];

  onSelectionChange(selected: { value: string | number; title: string }[]) {
    console.log('Selected options:', selected);
  }
}

Example

<tiSelect 
  [options]="options" 
  [placeholder]="'Select an option'" 
  [multiSelect]="false" 
  [selectedIds]="selectedValues" 
  (selectionChange)="handleSelectionChange($event)">
</tiSelect>

Properties

Property	Type	Default	Description
`options`	`{ value: string \\| number; title: string }[]`	`[]`	The list of options available in the dropdown.
`placeholder`	`string`	`'Select an option'`	The placeholder text when no option is selected.
`multiSelect`	`boolean`	`false`	Allows multiple selections when set to `true`.
`selectedIds`	`(string \\| number)[]`	`[]`	The IDs of the currently selected options.