ngx-select-dropdown
Advanced tools
A angular(4+) select dropdown for single select or multiselct module.
ngx-select-dropdown Custom Dropdown component for Angular 4+ with multiple and single selection options, with customization options
npm install ngx-select-dropdownSelectDropDownModule into your app.module;import { SelectDropDownModule } from 'ngx-select-dropdown'
SelectDropDownModule to the imports of your NgModule:@NgModule({
imports: [
...,
SelectDropDownModule
],
...
})
class YourModule { ... }
angular-cli.json for versions earlier than 1.4.0 "styles": [
"../node_modules/ngx-select-dropdown/dist/assets/style.css"
],
<ngx-select-dropdown></ngx-select-dropdown> in your templates to add the custom dropdown in your view like below<ngx-select-dropdown [instanceId]="'instance1'" (change)="selectionChanged($event)" [multiple]="true" [(ngModel)]="dataModel" [config]="config" [options]="dropdownOptions"></ngx-select-dropdown>
<ngx-select-dropdown [instanceId]="'instance2'" (change)="selectionChanged($event)" formControlName="selectData" [multiple]="true" [config]="config" [options]="dropdownOptions"></ngx-select-dropdown>
item and config variables available in the template context<ng-template #optionTemplate let-item="item" let-config="config">
<i class="fa fa-plus"></i>
{{item.name}}
<span class="new badge"></span>
</ng-template>
<ngx-select-dropdown [optionItemTemplate]="optionTemplate" [selectedItemTemplate]="optionTemplate" tabindex="0" [multiple]="true" [(ngModel)]="modelVar" [options]="options"
[config]="config">
</ngx-select-dropdown>
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.instanceId: any - instanceId of the dropdwon component instance.config: NgxDropdownConfig - configuration object.selectedItemTemplate: TemplateRef - Custom template ref for the selected itemoptionItemTemplate: TemplateRef - Custom template ref for the options items(available options)dropdownButtonTemplate: TemplateRef - Custom template ref for the dropdwon button elementnotFoundTemplate: TemplateRef - Custom template ref for the no matched found messageconfig = {
displayFn:(item: any) => { return item.hello.world; } //to support flexible text displaying for each item
displayKey:"description", //if objects array passed which key to be displayed defaults to description
search:true //true/false for the search functionlity 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: 0 // number thats limits the no of options displayed in the UI (if zero, options will not be limited)
moreText: 'more' // text to be displayed whenmore 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
inputDirection: 'ltr' // the direction of the search input can be rtl or ltr(default)
selectAllLabel: 'Select all' // label that is displayed in multiple selection for select all
enableSelectAll: false, // enable select all option to select all available items, default is false
}
change: Event - change event when user changes the selected optionsopen: Event - open event when the dropdown toogles onclose: Event - close event when the dropdown toogles offsearchChange: Event - search change event when the search text changesopenDropdown(instanceId:string) - method to open a particular dropdown instancecloseDropdown(instanceId:string) - method to close a particular dropdown instanceisOpen(instanceId:string) - method to check if a particular instance dropdown is openopenInstances - instanceId list of all the open instancesAs 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'};
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) .
Angular 4 and above support.
Bug with search functionality fixed.
Support for Observable data source for options and async pipe.
IE bug with styling.
Few other minor bug fixes.
Use arrows keys and enter to select items from available options.
Case insensitive search.
Few other minor bug fixes.
Support for scroll bar with too many list items.
Few other minor bug fixes.
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.
Support for angular 6
Removed dependency on rxjs
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
Search on a specified key value.
Support for Reactive forms
Few other minor imoprovements and fixes
Search text change event searchChange
Clear search on selection config
Disable with reactive forms .disable()
Custom function for displaying text for each option
Add disabled class to different items based on item.disabled
Angular library approach opted for development
Angular Ivy compatibility
Dropdown singleton service to interact with dropdown instances
Instance identifier
Upgraded to Angular v14 development environment
Auto drop based on the screen position
Over-ride css styles for available and selected items using class names `selected-item(s)` and `available-item(s)`
Ability to select all available items using a select all checkbox
Custom templates for available options, selected items and the dropdown button
Other minor fixes
Found a bug or an issue with this? Open a new issue here on GitHub.
Anyone and everyone is welcome to contribute. Please take a moment to review the guidelines for contributing.
FAQs
A angular(4+) select dropdown for single select or multiselct module.
The npm package ngx-select-dropdown receives a total of 2,944 weekly downloads. As such, ngx-select-dropdown popularity was classified as popular.
We found that ngx-select-dropdown demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.
Security News
The npm package for the LottieFiles Player web component was hit with a supply chain attack after a software engineer's npmjs credentials were compromised.