Gw-custom-select NPM

Angular gw-custom-select : Lightweight all in one UI Dropdown

Features

Custom binding to property or object
Custom option
Virtual Scroll support with large data sets (>5000 items).
Single select
Multiselect
Custom search
Group items

Getting started

Step 1: Install `gw-custom-select`:

NPM

npm i gw-custom-select

Step 2: Import the CustomSelectModule module:

import { CustomSelectModule } from 'gw-custom-select';

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

Step 3 : Configuration

Below is the JSON for configuration of dropdown

 multiSelect: any = { 'selectType' : 'multi-select', 'valueKey' : 'label', 'enableSearch' : true, 'icon' : 'plusMinus'};

Usage

Define options in your app component:

@Component({...})
export class AppComponent {

    selectedItem: number;
    items = [
        { id: 1, label: 'Date' },
        { id: 2, label: 'MultiSelect' },
        { id: 3, label: 'Select' }
    ];
}

HTML file

<lib-custom-select [selectConfig]="dateSelect" [options]="items" (selectChange)="change($event)"></lib-custom-select>

<lib-custom-select [selectConfig]="normalSelect" [options]="items" (selectChange)="change($event)"></lib-custom-select>

API

Inputs and Outputs

Input/Output	Type	Default	Required	Description
model	`ngModel`	`-`	No	Bind the value to model
idKey	`string`	`id`	No	Unique reference key for each object of dropdown
options	`JSON Array`	`-`	Yes	Data which need to iterate in dropdown.
selectConfig	`JSON Object`	`-`	Yes	Config for the dropdown for which user wants to create.
(selectChange)	`Function`	`-`	Yes	When the dropdown value changes this function will be called in the parent component