{"id":13661001,"url":"https://github.com/manishjanky/ngx-select-dropdown","last_synced_at":"2025-04-04T16:15:15.635Z","repository":{"id":28503073,"uuid":"118110980","full_name":"manishjanky/ngx-select-dropdown","owner":"manishjanky","description":"Custom Dropdown for Angular 4+ with multiple and single selection options","archived":false,"fork":false,"pushed_at":"2023-12-07T15:19:21.000Z","size":10454,"stargazers_count":117,"open_issues_count":10,"forks_count":81,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-28T15:07:41.218Z","etag":null,"topics":["angular","angular4","component","custom","custom-dropdown","dropdown","library","multiselect","multiselectdropdown","ngx-select-dropdown","select","single-select"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/manishjanky.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"License","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2018-01-19T10:21:52.000Z","updated_at":"2024-10-17T18:29:29.000Z","dependencies_parsed_at":"2023-12-07T16:27:22.511Z","dependency_job_id":"5b8f08d5-bd21-4e16-aac4-43b92a1bfd23","html_url":"https://github.com/manishjanky/ngx-select-dropdown","commit_stats":{"total_commits":289,"total_committers":22,"mean_commits":"13.136363636363637","dds":0.532871972318339,"last_synced_commit":"e2507a0d88c373a91c28291ff2b58b2576cf3c31"},"previous_names":[],"tags_count":47,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manishjanky%2Fngx-select-dropdown","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manishjanky%2Fngx-select-dropdown/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manishjanky%2Fngx-select-dropdown/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manishjanky%2Fngx-select-dropdown/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/manishjanky","download_url":"https://codeload.github.com/manishjanky/ngx-select-dropdown/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247208151,"owners_count":20901570,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular4","component","custom","custom-dropdown","dropdown","library","multiselect","multiselectdropdown","ngx-select-dropdown","select","single-select"],"created_at":"2024-08-02T05:01:28.420Z","updated_at":"2025-04-04T16:15:15.618Z","avatar_url":"https://github.com/manishjanky.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# ngx-select-dropdown\n\n[![GitHub license](https://img.shields.io/github/license/manishjanky/ngx-select-dropdown.svg)](https://github.com/me-and/mdf/blob/master/LICENSE)\n[![npm](https://img.shields.io/npm/v/ngx-select-dropdown.svg)]()\n[![Build Status](https://travis-ci.org/manishjanky/ngx-select-dropdown.svg?branch=master)](https://travis-ci.org/manishjanky/ngx-select-dropdown)\n[![Codecov branch](https://codecov.io/gh/manishjanky/ngx-select-dropdown/branch/master/graphs/badge.svg)]()\n![npm](https://img.shields.io/npm/dy/ngx-select-dropdown)\n[![GitHub top language](https://img.shields.io/github/languages/top/manishjanky/ngx-select-dropdown.svg)]()\n[![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/manishjanky/ngx-select-dropdown.svg)]()\n\n`ngx-select-dropdown` Custom Dropdown component for Angular 4+ with multiple and single selection options, with customization options\n\n## Features\n* single select dropdown\n* multi select dropdown\n* search dropdown list\n* arrows keys support\n* limit number of items displayed in dropdown\n* custom sort \n* angular forms support\n* angular v4 and above supported\n* cross browser support\n* custom template options\n\n\n## Examples\n\n* [demo-page](https://manishjanky.github.io/ngx-select-dropdown/)\n\n## Installation\n\n* `npm install ngx-select-dropdown`\n\n### Using with webpack and tsc builds/ angular-cli builds\n\n* import `SelectDropDownModule` into your app.module;\n````\nimport { SelectDropDownModule } from 'ngx-select-dropdown'\n````\n* add `SelectDropDownModule` to the imports of your NgModule:\n`````\n@NgModule({\n  imports: [\n    ...,\n    SelectDropDownModule\n  ],\n  ...\n})\nclass YourModule { ... }\n`````\n\n* include css styles in you `angular-cli.json` for versions earlier than 1.4.0\n\n`````\n \"styles\": [\n        \"../node_modules/ngx-select-dropdown/dist/assets/style.css\"\n      ],\n`````\n\n\n* use `\u003cngx-select-dropdown\u003e\u003c/ngx-select-dropdown\u003e` in your templates to add the custom dropdown in your view like below\n\n````\n\u003cngx-select-dropdown [instanceId]=\"'instance1'\" (change)=\"selectionChanged($event)\" [multiple]=\"true\" [(ngModel)]=\"dataModel\" [config]=\"config\" [options]=\"dropdownOptions\"\u003e\u003c/ngx-select-dropdown\u003e\n````\n* use with reactive form like\n````\n\u003cngx-select-dropdown [instanceId]=\"'instance2'\"  (change)=\"selectionChanged($event)\" formControlName=\"selectData\" [multiple]=\"true\" [config]=\"config\" [options]=\"dropdownOptions\"\u003e\u003c/ngx-select-dropdown\u003e\n````\n* use custom templates options like below. `item` and `config` variables available in the template context\n````\n\u003cng-template #optionTemplate let-item=\"item\" let-config=\"config\"\u003e\n  \u003ci class=\"fa fa-plus\"\u003e\u003c/i\u003e\n  {{item.name}}\n  \u003cspan class=\"new badge\"\u003e\u003c/span\u003e\n\u003c/ng-template\u003e\n\n\u003cngx-select-dropdown [optionItemTemplate]=\"optionTemplate\" [selectedItemTemplate]=\"optionTemplate\" tabindex=\"0\" [multiple]=\"true\" [(ngModel)]=\"modelVar\" [options]=\"options\"\n[config]=\"config\"\u003e\n\u003c/ngx-select-dropdown\u003e\n````\n\n## Configuration\n\n### Input\n\n* `multiple: boolean` - `true/false` beased if multiple selection required or not `Defaults to false`.\n* `options: Array` - Array of string/objects that are to be the dropdown options.\n* `disabled: boolean` - disabled attribute to disable the dropdown when required.\n* `instanceId: any` - instanceId of the dropdwon component instance.\n* `config: NgxDropdownConfig` - configuration object.\n* `selectedItemTemplate: TemplateRef` - Custom template ref for the selected item\n* `optionItemTemplate: TemplateRef` - Custom template ref for the options items(available options)\n* `dropdownButtonTemplate: TemplateRef` - Custom template ref for the dropdwon button element\n* `notFoundTemplate: TemplateRef` - Custom template ref for the no matched found message\n````\nconfig = {\n        displayFn:(item: any) =\u003e { return item.hello.world; } //to support flexible text displaying for each item\n        displayKey:\"description\", //if objects array passed which key to be displayed defaults to description\n        search:true //true/false for the search functionlity defaults to false,\n        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\n        placeholder:'Select' // text to be displayed when no item is selected defaults to Select,\n        customComparator: ()=\u003e{} // a custom function using which user wants to sort the items. default is undefined and Array.sort() will be used in that case,\n        limitTo: 0 // number thats limits the no of options displayed in the UI (if zero, options will not be limited)\n        moreText: 'more' // text to be displayed whenmore than one items are selected like Option 1 + 5 more\n        noResultsFound: 'No results found!' // text to be displayed when no items are found while searching\n        searchPlaceholder:'Search' // label thats displayed in search input,\n        searchOnKey: 'name' // key on which search should be performed this will be selective search. if undefined this will be extensive search on all keys\n        clearOnSelection: false // clears search criteria when an option is selected if set to true, default is false\n        inputDirection: 'ltr' // the direction of the search input can be rtl or ltr(default)\n        selectAllLabel: 'Select all' // label that is displayed in multiple selection for select all\n        enableSelectAll: false, // enable select all option to select all available items, default is false\n      }\n````\n\n### Output\n\n* `change: Event` - change event when user changes the selected options\n* `open: Event` - open event when the dropdown toogles on\n* `close: Event` - close event when the dropdown toogles off\n* `searchChange: Event` - search change event when the search text changes\n\n### Dropdown service\n* `openDropdown(instanceId:string)` - method to open a particular dropdown instance\n* `closeDropdown(instanceId:string)` - method to close a particular dropdown instance\n* `isOpen(instanceId:string)` - method to check if a particular instance dropdown is open\n* `openInstances` - instanceId list of all the open instances\n\n### Change detection\n\nAs 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:-\n````\nthis.options.push({id: 34, description: 'Adding new item'});\n\n// or\n\nconfig.height = '200px';\n\n`````\nBoth the above scenarios will not trigger the change detection. In order for the componet to detect the changes what you need to do is:-\n````\nthis.options = [...this.options, {id: 34, description: 'Adding new item'}];\n\n// or\n\nconfig = {...config, height:'200px'};\n\n````\n\n## Changelog\n* v0.1.0\n````\n Added a change event so that user can attach a change event handler.\n If multiselect the selected text will display first item and + count for eg. (Option 1 + 2 more) .\n````\n* v0.2.0\n````\n Angular 4 and above support.\n Bug with search functionality fixed.\n````\n* v0.3.0\n````\n Support for Observable data source for options and async pipe.\n IE bug with styling.\n Few other minor bug fixes.\n````\n* v0.4.0\n````\n Use arrows keys and enter to select items from available options.\n Case insensitive search.\n Few other minor bug fixes.\n````\n* v0.5.0\n````\n Support for scroll bar with too many list items.\n Few other minor bug fixes.\n````\n* v0.7.0\n````\n Support for limito pipe to limit number of options displayed in case of too many options.\n Support for customComparator / custom sort function\n Few other minor bug fixes.\n````\n* v0.7.2\n````\n Support for angular 6\n Removed dependency on rxjs\n````\n* v0.8.0\n````\n No Results found indicator with custom text passed with config\n Custom text for *more* when more than 1 items selected\n Open event emitted\n Close event emitted\n Search placeholder text\n````\n* v1.0.0\n````\n Search on a specified key value.\n Support for Reactive forms\n Few other minor imoprovements and fixes\n````\n* v1.2.0\n````\n Search text change event searchChange\n````\n* v1.3.0\n````\n Clear search on selection config\n Disable with reactive forms .disable()\n````\n* v1.5.0\n````\nCustom function for displaying text for each option\nAdd disabled class to different items based on item.disabled\n````\n* v2.0.0\n````\nAngular library approach opted for development\nAngular Ivy compatibility\n````\n* v3.0.0\n````\nDropdown singleton service to interact with dropdown instances\nInstance identifier\nUpgraded to Angular v14 development environment\n````\n* v3.0.1\n````\nAuto drop based on the screen position\nOver-ride css styles for available and selected items using class names `selected-item(s)` and `available-item(s)`\n````\n* v3.2.0\n````\nAbility to select all available items using a select all checkbox\n````\n* v3.3.0\n````\nCustom templates for available options, selected items and the dropdown button\nOther minor fixes\n````\n## Help Improve\n\nFound a bug or an issue with this? [Open a new issue](https://github.com/manishjanky/ngx-select-dropdown/issues) here on GitHub.\n\n## Contributing to this project\n\nAnyone and everyone is welcome to contribute. Please take a moment to\nreview the [guidelines for contributing](CONTRIBUTING.md).\n\n* [Bug reports](CONTRIBUTING.md#bugs)\n* [Feature requests](CONTRIBUTING.md#features)\n* [Pull requests](CONTRIBUTING.md#pull-requests)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanishjanky%2Fngx-select-dropdown","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmanishjanky%2Fngx-select-dropdown","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanishjanky%2Fngx-select-dropdown/lists"}