{"id":23086191,"url":"https://github.com/nileshpatel17/ng-multiselect-dropdown","last_synced_at":"2025-05-15T12:03:40.951Z","repository":{"id":37744206,"uuid":"100347703","full_name":"NileshPatel17/ng-multiselect-dropdown","owner":"NileshPatel17","description":"Multiple Select Dropdown Component","archived":false,"fork":false,"pushed_at":"2023-09-12T18:51:15.000Z","size":5473,"stargazers_count":329,"open_issues_count":286,"forks_count":291,"subscribers_count":15,"default_branch":"main","last_synced_at":"2025-05-15T12:03:32.347Z","etag":null,"topics":["angular","dropdown","dropdown-multiselect","multiselect"],"latest_commit_sha":null,"homepage":"https://nileshpatel17.github.io/ng-multiselect-dropdown/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NileshPatel17.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-08-15T06:46:22.000Z","updated_at":"2025-04-01T08:49:59.000Z","dependencies_parsed_at":"2024-01-15T20:51:26.331Z","dependency_job_id":"d5626e32-8d3c-4f36-871a-f929c8fba798","html_url":"https://github.com/NileshPatel17/ng-multiselect-dropdown","commit_stats":{"total_commits":95,"total_committers":21,"mean_commits":4.523809523809524,"dds":"0.41052631578947374","last_synced_commit":"5e1ce804f2fa55fd8c2b5614e4d02a4004929cea"},"previous_names":[],"tags_count":35,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NileshPatel17%2Fng-multiselect-dropdown","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NileshPatel17%2Fng-multiselect-dropdown/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NileshPatel17%2Fng-multiselect-dropdown/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NileshPatel17%2Fng-multiselect-dropdown/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NileshPatel17","download_url":"https://codeload.github.com/NileshPatel17/ng-multiselect-dropdown/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254337612,"owners_count":22054253,"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","dropdown","dropdown-multiselect","multiselect"],"created_at":"2024-12-16T18:42:21.195Z","updated_at":"2025-05-15T12:03:35.935Z","avatar_url":"https://github.com/NileshPatel17.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular Multiselect Dropdown\n\u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e\n[![All Contributors](https://img.shields.io/badge/all_contributors-6-orange.svg?style=flat-square)](#contributors-)\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n\n[![npm version](https://img.shields.io/npm/v/ng-multiselect-dropdown.svg)](https://www.npmjs.com/package/ng-multiselect-dropdown)\n[![downloads](https://img.shields.io/npm/dt/ng-multiselect-dropdown.svg)](https://www.npmjs.com/package/ng-multiselect-dropdown)\n[![downloads](https://img.shields.io/npm/dm/ng-multiselect-dropdown.svg)](https://www.npmjs.com/package/ng-multiselect-dropdown)\n\nAngular multiselect dropdown component for web applications. Easy to integrate and use. It can be bind to any custom data source.\n\n# [Demo](https://nileshpatel17.github.io/ng-multiselect-dropdown/)\n\n![demo](Screenshots/ng-multiselect-dropdown_v0.1.6.gif)\n\n## Getting Started\n\n## Features\n\n- dropdown with single/multiple selction option\n- bind to any custom data source\n- search item with custom placeholder text\n- limit selection\n- select/de-select all items\n- custom theme\n\n### Installation\n\n```\nnpm install ng-multiselect-dropdown\n```\n\nAnd then include it in your module (see [app.module.ts](https://github.com/NileshPatel17/ng-multiselect-dropdown/blob/master/src/app/app.module.ts)):\n\n```ts\nimport { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';\n// ...\n\n@NgModule({\n  imports: [\n    NgMultiSelectDropDownModule.forRoot()\n    // ...\n  ]\n  // ...\n})\nexport class AppModule {}\n```\n\n### Usage\n\n```ts\nimport { Component, OnInit } from '@angular/core';\nimport { IDropdownSettings } from 'ng-multiselect-dropdown';\n\nexport class AppComponent implements OnInit {\n  dropdownList = [];\n  selectedItems = [];\n  dropdownSettings = {};\n  ngOnInit() {\n    this.dropdownList = [\n      { item_id: 1, item_text: 'Mumbai' },\n      { item_id: 2, item_text: 'Bangaluru' },\n      { item_id: 3, item_text: 'Pune' },\n      { item_id: 4, item_text: 'Navsari' },\n      { item_id: 5, item_text: 'New Delhi' }\n    ];\n    this.selectedItems = [\n      { item_id: 3, item_text: 'Pune' },\n      { item_id: 4, item_text: 'Navsari' }\n    ];\n    this.dropdownSettings:IDropdownSettings = {\n      singleSelection: false,\n      idField: 'item_id',\n      textField: 'item_text',\n      selectAllText: 'Select All',\n      unSelectAllText: 'UnSelect All',\n      itemsShowLimit: 3,\n      allowSearchFilter: true\n    };\n  }\n  onItemSelect(item: any) {\n    console.log(item);\n  }\n  onSelectAll(items: any) {\n    console.log(items);\n  }\n}\n```\n\n```html\n\u003cng-multiselect-dropdown\n  [placeholder]=\"'custom placeholder'\"\n  [settings]=\"dropdownSettings\"\n  [data]=\"dropdownList\"\n  [(ngModel)]=\"selectedItems\"\n  (onSelect)=\"onItemSelect($event)\"\n  (onSelectAll)=\"onSelectAll($event)\"\n\u003e\n\u003c/ng-multiselect-dropdown\u003e\n```\n\n### Settings\n\n| Setting                        | Type       | Description                                                                                                                                                                                                                                                                                                                                              | Default Value       |\n| :----------------------------- | :--------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------ |\n| singleSelection                | Boolean    | Mode of this component. If set `true` user can select more than one option.                                                                                                                                                                                                                                                                              | false               |\n| placeholder                    | String     | Text to be show in the dropdown, when no items are selected.                                                                                                                                                                                                                                                                                             | 'Select'            |\n| disabled                       | Boolean    | Disable the dropdown                                                                                                                                                                                                                                                                                                                                     | false               |\n| data                           | Array\u003cany\u003e | Array of items from which to select. Should be an array of objects with id and `text` properties. You can also use custom properties. In that case you need to map idField and `textField` properties. As convenience, you may also pass an array of strings, in which case the same string is used for both the ID and the text(no mapping is required) | n/a                 |\n| idField                        | String     | map id field in case of custom array of object                                                                                                                                                                                                                                                                                                           | 'id'                |\n| textField                      | String     | map text field in case of custom array of object                                                                                                                                                                                                                                                                                                         | 'text'              |\n| enableCheckAll                 | Boolean    | Enable the option to select all items in list                                                                                                                                                                                                                                                                                                            | false               |\n| selectAllText                  | String     | Text to display as the label of select all option                                                                                                                                                                                                                                                                                                        | Select All          |\n| unSelectAllText                | String     | Text to display as the label of unSelect option                                                                                                                                                                                                                                                                                                          | UnSelect All        |\n| allowSearchFilter              | Boolean    | Enable filter option for the list.                                                                                                                                                                                                                                                                                                                       | false               |\n| searchPlaceholderText          | String     | custom search placeholder                                                                                                                                                                                                                                                                                                                                | Search              |\n| clearSearchFilter              | Boolean    | clear search filter on dropdown close                                                                                                                                                                                                                                                                                                                    | true                |\n| maxHeight                      | Number     | Set maximum height of the dropdown list in px.                                                                                                                                                                                                                                                                                                           | 197                 |\n| itemsShowLimit                 | Number     | Limit the number of items to show in the input field. If not set will show all selected.                                                                                                                                                                                                                                                                 | All                 |\n| limitSelection                 | Number     | Limit the selection of number of items from the dropdown list. Once the limit is reached, all unselected items gets disabled.                                                                                                                                                                                                                            | none                |\n| searchPlaceholderText          | String     | Custom text for the search placeholder text. Default value would be 'Search'                                                                                                                                                                                                                                                                             | 'Search'            |\n| noDataAvailablePlaceholderText | String     | Custom text when no data is available.                                                                                                                                                                                                                                                                                                                   | 'No data available' |\n| closeDropDownOnSelection       | Boolean    | Closes the dropdown when item is selected. applicable only in cas of single selection                                                                                                                                                                                                                                                                    | false               |\n| defaultOpen                    | Boolean    | open state of dropdown                                                                                                                                                                                                                                                                                                                                   | false               |\n| allowRemoteDataSearch                    | Boolean    | allow search remote api if no data is present.                                                                                                                                                                                                                                                                                                                                   | false               |\n\n\n### Callback Methods\n\n- `onSelect` - Return the selected item when an item is checked.\n  Example : (onSelect)=\"onItemSelect($event)\"\n- `onSelectAll` - Return the all items.\n  Example : (onSelectAll)=\"onSelectAll($event)\".\n- `onDeSelect` - Return the unselected item when an item is unchecked.\n  Example : (onDeSelect)=\"onItemDeSelect($event)\"\n- `onFilterChange` - Return the key press.\n  Example : (onFilterChange)=\"onFilterChange($event)\"\n- `onDropDownClose`-\n  Example : (onDropDownClose)=\"onDropDownClose()\"\n\n\n### Custom Theme\n\n- The component package has a themes folder in node_modules at `ng-multiselet-dropdown\\themes\\ng-multiselect-dropdown.theme.scss`\n- Include the `ng-multiselet-dropdown.theme.css` in `angular-cli.json` (for versions below angular 6) and `angular.json` (for version 6 or more).\n- [Refer this file](https://github.com/NileshPatel17/ng-multiselect-dropdown/blob/master/custom-theme.md) on how to add the css file to your angular project.\n\u003cimg src=\"Screenshots/theme-step-3.png\" width=\"800\"\u003e\n\u003c!-- ![](Screenshots/theme-step-3.png) --\u003e\n\n## Custom Template(in beta):\n\n### Variables can be used in template\n\n1. id: return id as number\n2. option: return option text. return string\n3. isSelected: determine if item is selected or not. returns boolean\n\nTemplate for each item\n```\n\u003cng-template #optionsTemplate let-item let-option=\"option\" let-id=\"id\" let-isSelected=\"isSelected\"\u003e\n  {{option}}\n\u003c/ng-template\u003e\n```\n\nTemplate for selected item\n```\n\u003cng-template #optionSelectedTemplate optionSelectedTemplate let-option=\"option\"  let-id=\"id\"\u003e\n  {{option}}\n\u003c/ng-template\u003e\n```\n\n[Demo](https://codesandbox.io/s/custom-template-uyo0o?file=/src/app/app.component.html)\n### Run locally\n\n- Clone the repository or downlod the .zip,.tar files.\n- Run `npm install`\n- Run `ng serve` for a dev server\n- Navigate to `http://localhost:4200/`\n\n### Library Build / NPM Package\n\nRun `yarn build:lib` to build the library and generate an NPM package. The build artifacts will be stored in the dist-lib/ folder.\n\n## Running unit tests\n\nRun `yarn test` to execute the unit tests.\n\n## Development\n\nThis project was generated with Angular CLI version 1.7.1.\n\n## Contributions\n\nContributions are welcome, please open an issue and preferrably file a pull request.\n\n### Opening Issue\n\nPlease share sample code using codesandbox.com or stackblitz.com to help me re-produce the issue.\n\n## License\n\nMIT License.\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://blog.techotom.com\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/1773838?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eTom Saleeba\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/Nilesh Patel/ng-multiselect-dropdown/commits?author=tomsaleeba\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://overtrack.gg\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/2515062?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eSimon Pinfold\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/Nilesh Patel/ng-multiselect-dropdown/commits?author=synap5e\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://helpfordeveloper.blogspot.in\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/32981723?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eSushil Suthar\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/Nilesh Patel/ng-multiselect-dropdown/commits?author=sushil-suthar\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://sacgro.com\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/1292182?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eSachin Grover\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/Nilesh Patel/ng-multiselect-dropdown/commits?author=sacgrover\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/WWL-MikeRoberts\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/9750056?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMike Roberts\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/Nilesh Patel/ng-multiselect-dropdown/commits?author=WWL-MikeRoberts\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/DsosaV\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/3926475?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDavid Sosa\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/Nilesh Patel/ng-multiselect-dropdown/commits?author=DsosaV\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/gserg\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/687825?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eSergiy Gedeon\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/Nilesh Patel/ng-multiselect-dropdown/commits?author=gserg\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-enable --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnileshpatel17%2Fng-multiselect-dropdown","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnileshpatel17%2Fng-multiselect-dropdown","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnileshpatel17%2Fng-multiselect-dropdown/lists"}