vc-select-dropdown

this is just an modified copy of the original with some occasional changes

ngx-select-dropdown

ngx-select-dropdown Custom Dropdown component for Angular 4+ with multiple and single selection options

Original package: manishjanky/ngx-select-dropdown

Features

• single select dropdown
• multi select dropdown
• search dropdown list
• arrows keys support
• limit number of items displayed in dropdown
• custom sort
• angular forms support
• angular v4 and above supported
• cross browser support

Examples

• demo-page

Installation

• npm install ngx-select-dropdown

Using with webpack and tsc builds/ angular-cli builds

• import SelectDropDownModule into your app.module;

import { SelectDropDownModule } from 'ngx-select-dropdown'

• add SelectDropDownModule to the imports of your NgModule:

@NgModule({
  imports: [
    ...,
    SelectDropDownModule
  ],
  ...
})
class YourModule { ... }

• include css styles in you angular-cli.json for versions earlier than 1.4.0

 "styles": [
        "../node_modules/ngx-select-dropdown/dist/assets/style.css"
      ],

• use <ngx-select-dropdown></ngx-select-dropdown> in your templates to add the custom dropdown in your view like below

<ngx-select-dropdown (change)="selectionChanged($event)" [multiple]="true" [(ngModel)]="dataModel" [config]="config" [options]="dropdownOptions"></ngx-select-dropdown>

• use with reactive form like

<ngx-select-dropdown (change)="selectionChanged($event)" formControlName="selectData" [multiple]="true" [config]="config" [options]="dropdownOptions"></ngx-select-dropdown>

Config

Input

• multiple: boolean - true/false beased if multiple selection required or not Defaults to false.
• options: Array - Array of string/objects that are to be the dropdown options.
• disabled: boolean - disabled attribute to disable the dropdown when required.
• config: Object - configuration object.

config = {
  displayKey: "description", // if objects array passed which key to be displayed defaults to description
  search: true, // true/false for the search functionality defaults to false,
  height: 'auto', // height of the list so that if there are more no of items it can show a scroll defaults to auto. With auto height scroll will never appear
  placeholder: 'Select', // text to be displayed when no item is selected defaults to Select,
  customComparator: () => {}, // a custom function using which user wants to sort the items. default is undefined and Array.sort() will be used in that case,
  limitTo: options.length, // a number thats limits the no of options displayed in the UI similar to angular's limitTo pipe
  moreText: 'more', // text to be displayed when more than one items are selected like Option 1 + 5 more
  noResultsFound: 'No results found!', // text to be displayed when no items are found while searching
  searchPlaceholder: 'Search', // label thats displayed in search input,
  searchOnKey: 'name', // key on which search should be performed this will be selective search. if undefined this will be extensive search on all keys
  clearOnSelection: false, // clears search criteria when an option is selected if set to true, default is false
  mustHaveAValue: false, // if it's true, the user will not be able to deselect all the selected items, at least 1 item should remain selected
}

Output

• change: Event - change event when user changes the selected options
• open: Event - open event when the dropdown toogles on
• close: Event - close event when the dropdown toogles off
• searchChange: Event - search change event when the search text changes

Change detection

As of now ngx-select-dropdown uses Default change detection startegy which means dirty checking checks for immutable data types. And in Javascript Objects and arrays are mutable. So when changing any of the @Input parameters if you mutate an object change detection will not detect it. For ex:-

this.options.push({id: 34, description: 'Adding new item'});

// or

config.height = '200px';

Both the above scenarios will not trigger the change detection. In order for the componet to detect the changes what you need to do is:-

this.options = [...this.options, {id: 34, description: 'Adding new item'}];

// or

config = {...config, height:'200px'};

Changelog

• v0.1.0

 Added a change event so that user can attach a change event handler.
 If multiselect the selected text will display first item and + count for eg. (Option 1 + 2 more) .

• v0.2.0

 Angular 4 and above support.
 Bug with search functionality fixed.

• v0.3.0

 Support for Observable data source for options and async pipe.
 IE bug with styling.
 Few other minor bug fixes.

• v0.4.0

 Use arrows keys and enter to select items from available options.
 Case insensitive search.
 Few other minor bug fixes.

• v0.5.0

 Support for scroll bar with too many list items.
 Few other minor bug fixes.

• v0.7.0

 Support for limito pipe to limit number of options displayed in case of too many options.
 Support for customComparator / custom sort function
 Few other minor bug fixes.

• v0.7.2

 Support for angular 6
 Removed dependency on rxjs

• v0.8.0

 No Results found indicator with custom text passed with config
 Custom text for *more* when more than 1 items selected
 Open event emitted
 Close event emitted
 Search placeholder text

• v1.0.0

 Search on a specified key value.
 Support for Reactive forms
 Few other minor imoprovements and fixes

• v1.2.0

 Search text change event searchChange

• v1.3.0

 Clear search on selection config
 Disable with reactive forms .disable()

Help Improve

Found a bug or an issue with this? Open a new issue here on GitHub.

Contributing to this project

Anyone and everyone is welcome to contribute. Please take a moment to review the guidelines for contributing.

• Bug reports
• Feature requests
• Pull requests