CustomSelect2

A lightweight and customizable multi-select dropdown component for Angular projects. This library is designed to handle single and multi-selection scenarios with ease, including options like limiting the number of selections, enabling search functionality, and more.

Installation

Install the package using npm:

npm install custom-select2

Import the Module

import { CustomSelect2Module } from 'custom-select2';

@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, CustomSelect2Module ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

Usage

<lib-custom-select2 [options]="options" [selectedOptions]="selectedOptions" [settings]="settings" (selectionChange)="onSelectionChange($event)">

Inputs

1. [options]: An array of objects or strings representing the dropdown options. Example:

options = [ { item_id: 1, item_text: 'Option 1' }, { item_id: 2, item_text: 'Option 2' }, { item_id: 3, item_text: 'Option 3' } ];

If you prefer, you can also pass an array of strings:

options = ['Option 1', 'Option 2', 'Option 3'];

2. [selectedOptions]: An array of pre-selected options.

selectedOptions = [ { item_id: 1, item_text: 'Option 1' } ];

3. [settings]: An object to configure the behavior and appearance of the dropdown. Example settings = { singleSelection: false, // Set to true for single selection placeholder: 'Select options', limitSelection: 3, // Limit the number of selections enableCheckAll: true, // Enable "Select All" option allowSearchFilter: true, // Enable search functionality showClearAll: true, // Show "Clear All" button textField: 'item_text', // Field to display in the dropdown idField: 'item_id' // Field for the unique identifier };

4. (selectionChange): Event emitted whenever the selection changes, providing the updated array of selected options.

onSelectionChange(selected: any[]) { console.log('Selected options:', selected); }

Features

Single or Multi-Selection: Configure the dropdown to allow single or multiple selections. Searchable Dropdown: Enable search functionality for large datasets. Selection Limit: Limit the number of selectable options. Clear All Options: Easily clear all selections with a single click. Fully Customizable: Control the behavior and appearance with the settings input.

Example Configuration

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

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { options = [ { item_id: 1, item_text: 'Option 1' }, { item_id: 2, item_text: 'Option 2' }, { item_id: 3, item_text: 'Option 3' } ];

selectedOptions = [];

settings = { singleSelection: false, placeholder: 'Select options', limitSelection: 3, enableCheckAll: true, allowSearchFilter: true, showClearAll: true, textField: 'item_text', idField: 'item_id' };

onSelectionChange(selected: any[]) { console.log('Selected options:', selected); } }

Development

If you encounter any issues or have feature requests, feel free to open an issue in the repository.

License

You can now save this content into a file named README.md in your project's root directory. Let me know if you need help with anything else!