{"id":13808560,"url":"https://github.com/CuppaLabs/angular2-multiselect-dropdown","last_synced_at":"2025-05-14T02:32:05.058Z","repository":{"id":19976143,"uuid":"88418679","full_name":"CuppaLabs/angular2-multiselect-dropdown","owner":"CuppaLabs","description":"Angular 2 Dropdown Multiselect","archived":false,"fork":false,"pushed_at":"2024-07-18T19:53:39.000Z","size":21981,"stargazers_count":298,"open_issues_count":169,"forks_count":256,"subscribers_count":15,"default_branch":"master","last_synced_at":"2024-11-09T11:42:01.444Z","etag":null,"topics":["angular-multiple-selection","angular-select","angular2","angular2-select","angular4-mutiselect-dropdown","angular6-multiselect-dropdown","dropdown","multiselect","select"],"latest_commit_sha":null,"homepage":"https://cuppalabs.github.io/angular2-multiselect-dropdown","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/CuppaLabs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-04-16T14:29:11.000Z","updated_at":"2024-10-29T19:27:40.000Z","dependencies_parsed_at":"2024-06-18T12:26:57.862Z","dependency_job_id":"56c2ee73-a12c-4f64-85b9-696d63e6299d","html_url":"https://github.com/CuppaLabs/angular2-multiselect-dropdown","commit_stats":{"total_commits":247,"total_committers":23,"mean_commits":10.73913043478261,"dds":"0.27125506072874495","last_synced_commit":"8422dae00215f4f5ff43465989eaee99efcdcdce"},"previous_names":[],"tags_count":42,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CuppaLabs%2Fangular2-multiselect-dropdown","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CuppaLabs%2Fangular2-multiselect-dropdown/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CuppaLabs%2Fangular2-multiselect-dropdown/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CuppaLabs%2Fangular2-multiselect-dropdown/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CuppaLabs","download_url":"https://codeload.github.com/CuppaLabs/angular2-multiselect-dropdown/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225273247,"owners_count":17448074,"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-multiple-selection","angular-select","angular2","angular2-select","angular4-mutiselect-dropdown","angular6-multiselect-dropdown","dropdown","multiselect","select"],"created_at":"2024-08-04T01:01:46.151Z","updated_at":"2024-11-19T00:30:50.750Z","avatar_url":"https://github.com/CuppaLabs.png","language":"TypeScript","readme":"# Angular Multiselect Dropdown - Angular version support 2, 4, 6, 8, 13, 14, 15, 16, 17, 18\n[![npm version](https://img.shields.io/npm/v/angular2-multiselect-dropdown.svg)](https://www.npmjs.com/package/angular2-multiselect-dropdown)\n[![downloads](https://img.shields.io/npm/dt/angular2-multiselect-dropdown.svg)](https://www.npmjs.com/package/angular2-multiselect-dropdown)\n[![license](https://img.shields.io/github/license/cuppalabs/angular2-multiselect-dropdown.svg)](https://www.npmjs.com/package/angular2-multiselect-dropdown)\n\nAngular 2 multiselect dropdown component for web applications. Easy to integrate and use.\n\n![](https://cuppalabs.github.io/angular2-multiselect-dropdown/assets/img/multiselect.jpeg)\n\n# Important Notice !! \n#####  From v3.0.0 onwards, you need to include `default.theme.css` file to get the basic styling of the dropdown. Refer to `themes and theming` section below\n\n\n# [Documentation](http://cuppalabs.github.io/components/multiselectDropdown) | [Demos / Examples](https://cuppalabs.github.io/angular2-multiselect-dropdown).\n\n## Table of Contents\n##### 1. Getting Started\n##### 2. Installation\n##### 3. Usage\n##### 4  Theming \n##### 5. Templates\n##### 6. Template Driven Forms support\n##### 7. Reactive Forms support\n##### 8. Settings configuration\n##### 9. Callbacks and events\n##### 10. Lazy lodaing - handle large data lists\n##### 11. Group By feature\n##### 12. Search filter for both plain list and grouped list\n##### 13. Custom Search / Search API\n\n\n\n\n\n## Getting Started\n### Installation\n- The Mutiselect Dropdown package is published on the [npm](https://www.npmjs.com/package/angular2-multiselect-dropdown) Registry. \n- Install the package :\n    `npm install angular2-multiselect-dropdown`\n\n- Once installed import `AngularMultiSelectModule` from the installed package into your module as follows:\n\n## Dependencies\n\nLatest version available for each version of Angular\n\n| angular2-multiselect-dropdown | Angular     |\n| ----------------------------- | ----------- |\n| 10.0.0      | 18.X.X |\n| 9.0.0       | 17.X.X |\n| 8.0.0       | 16.X.X |\n| 7.0.0       | 15.X.X |\n| 6.0.0       | 14.X.X |\n\n\n### Usage\nImport `AngularMultiSelectModule` into `NgModule` in `app.module.ts`. Angular's `FormsModule` is also required.\n```js\nimport { AngularMultiSelectModule } from 'angular2-multiselect-dropdown';\nimport { FormsModule } from '@angular/forms';\n\n@NgModule({\n  // ...\n  imports: [\n    AngularMultiSelectModule,\n    FormsModule\n  ]\n  // ...\n})\n\n```\n\nDeclare the component data variables and options in your component where you want to consume the dropdown component.\n\n```js\n\nimport { Component, OnInit } from '@angular/core';\n\nexport class AppComponent implements OnInit {\n    dropdownList = [];\n    selectedItems = [];\n    dropdownSettings = {};\n    ngOnInit(){\n        this.dropdownList = [\n                              {\"id\":1,\"itemName\":\"India\"},\n                              {\"id\":2,\"itemName\":\"Singapore\"},\n                              {\"id\":3,\"itemName\":\"Australia\"},\n                              {\"id\":4,\"itemName\":\"Canada\"},\n                              {\"id\":5,\"itemName\":\"South Korea\"},\n                              {\"id\":6,\"itemName\":\"Germany\"},\n                              {\"id\":7,\"itemName\":\"France\"},\n                              {\"id\":8,\"itemName\":\"Russia\"},\n                              {\"id\":9,\"itemName\":\"Italy\"},\n                              {\"id\":10,\"itemName\":\"Sweden\"}\n                            ];\n        this.selectedItems = [\n                                {\"id\":2,\"itemName\":\"Singapore\"},\n                                {\"id\":3,\"itemName\":\"Australia\"},\n                                {\"id\":4,\"itemName\":\"Canada\"},\n                                {\"id\":5,\"itemName\":\"South Korea\"}\n                            ];\n        this.dropdownSettings = { \n                                  singleSelection: false, \n                                  text:\"Select Countries\",\n                                  selectAllText:'Select All',\n                                  unSelectAllText:'UnSelect All',\n                                  enableSearchFilter: true,\n                                  classes:\"myclass custom-class\"\n                                };            \n    }\n    onItemSelect(item:any){\n        console.log(item);\n        console.log(this.selectedItems);\n    }\n    OnItemDeSelect(item:any){\n        console.log(item);\n        console.log(this.selectedItems);\n    }\n    onSelectAll(items: any){\n        console.log(items);\n    }\n    onDeSelectAll(items: any){\n        console.log(items);\n    }\n}\n```\n\nAdd the following component tag in you template \n```html\n\u003cangular2-multiselect [data]=\"dropdownList\" [(ngModel)]=\"selectedItems\" \n    [settings]=\"dropdownSettings\" \n    (onSelect)=\"onItemSelect($event)\" \n    (onDeSelect)=\"OnItemDeSelect($event)\"\n    (onSelectAll)=\"onSelectAll($event)\"\n    (onDeSelectAll)=\"onDeSelectAll($event)\"\u003e\u003c/angular2-multiselect\u003e\n\n```\n\n### Themes and Theming\n\n- From v3.0.0 onwards, you need to include `default.theme.css` file to get the basic styling of the dropdown. \n- The component package has a themes folder in node_modules at `angular2-multiselect-dropdown\\themes\\default.theme.css`\n- Include the `default.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/CuppaLabs/angular2-multiselect-dropdown/blob/master/angular.json) on how to add the css file to your angular project.\n\nYou can create your own theme from now on. You can have a look at example scss theming file at [Default theme](https://github.com/CuppaLabs/angular2-multiselect-dropdown/tree/master/src/themes/default.theme.scss) \n\n\n### Template - For custom html of menu item\n\n```html\n\u003cangular2-multiselect [data]=\"dropdownList\" [(ngModel)]=\"selectedItems\" [settings]=\"dropdownSettings\"\u003e\n  \u003cc-item\u003e\n          \u003cng-template let-item=\"item\"\u003e\n            \u003clabel style=\"color: #333;min-width: 150px;\"\u003e{{item.itemName}}\u003c/label\u003e\n            \u003cimg [src]=\"item.image\" style=\"width: 30px; border: 1px solid #efefef;margin-right: 20px;\" /\u003e\n            \u003clabel\u003eCapital - {{item.capital}}\u003c/label\u003e\n          \u003c/ng-template\u003e\n  \u003c/c-item\u003e    \n\u003c/angular2-multiselect\u003e\n\n```\n\n### Template - For custom html of Selected item - badge\n\n```html\n\u003cangular2-multiselect [data]=\"dropdownList\" [(ngModel)]=\"selectedItems\" [settings]=\"dropdownSettings\"\u003e\n  \u003cc-badge\u003e\n           \u003cng-template let-item=\"item\"\u003e\n            \u003clabel style=\"margin: 0px;\"\u003e{{item.itemName}}\u003c/label\u003e\n            \u003cimg [src]=\"item.image\" style=\"width: 16px; margin-right: 5px;\" /\u003e\n           \u003c/ng-template\u003e\n  \u003c/c-badge\u003e  \n\u003c/angular2-multiselect\u003e\n\n```\n\n### Template Driven Forms support\n\n```html\n\n\u003cform (ngSubmit)=\"onSubmit()\" #loginForm=\"ngForm\" style=\"border: 1px solid #ccc; padding: 10px;\"\u003e\n        \u003cdiv class=\"form-group\"\u003e\n            \u003clabel for=\"name\"\u003eSkills\u003c/label\u003e\n            \u003cangular2-multiselect [data]=\"itemList\" [(ngModel)]=\"formModel.skills\" \n                                  [settings]=\"settings\" \n                                  (onSelect)=\"onItemSelect($event)\"\n                                  (onDeSelect)=\"OnItemDeSelect($event)\" \n                                  (onSelectAll)=\"onSelectAll($event)\" \n                                  (onDeSelectAll)=\"onDeSelectAll($event)\" name=\"skills\"\u003e\n            \u003c/angular2-multiselect\u003e\n        \u003c/div\u003e\n\u003c/form\u003e\n\n```\n\n```js\n\nformModel = {\n        name: '',\n        email: 'ascasc@aa.com',\n        skills: [{ \"id\": 1, \"itemName\": \"Angular\" }]\n    };\n\n```\n\n### Reactive Forms support\n\n```html\n\n\u003cform [formGroup]=\"userForm\" novalidate style=\"border: 1px solid #ccc; padding: 10px;\"\u003e\n        \u003cdiv class=\"form-group\"\u003e\n            \u003clabel for=\"name\"\u003eSkills\u003c/label\u003e\n           \u003cangular2-multiselect [data]=\"itemList\" [(ngModel)]=\"selectedItems\" \n                                  [settings]=\"settings\" \n                                  (onSelect)=\"onItemSelect($event)\"\n                                  (onDeSelect)=\"OnItemDeSelect($event)\" \n                                  (onSelectAll)=\"onSelectAll($event)\" \n                                  (onDeSelectAll)=\"onDeSelectAll($event)\" formControlName=\"skills\"\u003e\n            \u003c/angular2-multiselect\u003e\n        \u003c/div\u003e\n\u003c/form\u003e\n\n```\n\n```js\nuserForm: FormGroup;\nthis.userForm = this.fb.group({\n            name: '',\n            email: ['', Validators.required],\n            skills: [[], Validators.required]\n        });\n\n```\n\n### Settings\nThe following list of settings are supported by the component. Configure the settings to meet your requirement.\n\n| Setting         |Type    | Description            | Default Value |\n|:--- |:--- |:--- |:--- |\n| singleSelection | Boolean | To set the dropdown for single item selection only. | false |\n| text | String | Text to be show in the dropdown, when no items are selected. | 'Select' |\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| enableSearchFilter | Boolean | Enable filter option for the list. | false |\n| enableFilterSelectAll | Boolean | A 'select all' checkbox to select all filtered results.  | true |\n| filterSelectAllText | String | Text to display as the label of select all option | Select all filtered results |\n| filterUnSelectAllText | String | Text to display as the label of unSelect option | UnSelect all filtered results |\n| maxHeight | Number | Set maximum height of the dropdown list in px. | 300 |\n| badgeShowLimit | Number | Limit the number of badges/items to show in the input field. If not set will show all selected. | All |\n| classes | String | Custom classes to the dropdown component. Classes are added to the dropdown selector tag. To add multiple classes, the value should be space separated class names.| '' |\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| disabled | Boolean | Disable the dropdown | false |\n| searchPlaceholderText | String | Custom text for the search placeholder text. Default value would be 'Search' | 'Search' |\n| groupBy | String | Name of the field by which the list should be grouped. | none |\n| selectGroup | Boolean | Select a group at once. GroupBy should be enabled, to use this. | false |\n| searchAutofocus | Boolean | Autofocus search input field| true |\n| labelKey | String | The property name which should be rendered as label in the dropdown| itemName |\n| primaryKey | String | The property by which the object is identified. Default is 'id'.| id |\n| position | String | Set the position of the dropdown list to 'top' or 'bottom'| bottom |\n| noDataLabel | String | Label text when no data is available in the list| 'No Data Available' |\n| searchBy | Array | Search the list by certain properties of the list item. Ex: [\"itemName, \"id\",\"name\"]. Deafult is , it will search the list by all the properties of list item | [] |\n| lazyLoading | Boolean | Enable lazy loading. Used to render large datasets. | false |\n| showCheckbox | Boolean | Show or hide checkboxes in the list | true |\n| addNewItemOnFilter | Boolean | Whe you filter items and if, the item is not found, you can add the text as new item to the list | false |\n| addNewButtonText | String | The text in the button when `addNewItemOnFilter` is enabled | 'Add' |\n| escapeToClose | boolean | Press excape key to close the dropdown | true |\n| autoPosition | boolean | Enable dropdown to open either on 'top' or 'bottom' Ex: settings = { position: 'bottom', autoPosition: false }; open the dropdown always at bottom |  true |\n| tagToBody | boolean | If the dropdown to be appended to body or not ? | true |\n\n### Events\n- `onSelect` - Return the selected item on selection.\n    Example : (onSelect)=\"onItemSelect($event)\"\n- `onDeSelect` - Return the un-selected item on un-selecting.\n    Example : (onDeSelect)=\"OnItemDeSelect($event)\"\n- `onSelectAll` - Return the list of all selected items.\n    Example : (onSelectAll)=\"onSelectAll($event)\"\n- `onDeSelectAll` - Returns an empty array.\n    Example : (onDeSelectAll)=\"onDeSelectAll($event)\"\n- `onGroupSelect` - Returns the selected group items as an array.\n    Example: (onGroupSelect)=\"onGroupSelect($event)\"\n- `onGroupDeSelect` - Returns the sun-elected group items as an array.\n    Example: (onGroupDeSelect)=\"onGroupDeSelect($event)\"\n- `onOpen` - Callback method fired after the dropdown opens\n    Example : (onOpen)=\"onOpen($event)\"\n- `onClose` - Callback method, fired when the dropdown is closed\n    Example : (onClose)=\"onClose($event)\"\n- `onScrollToEnd` - Callback event fired when the dropdown list is scrolled to the end. Usually used with virtual scrolling, to load data on      scroll.\n    Example : (onScrollToEnd)=\"fetchMore($event)\"\n- `onAddFilterNewItem` - Callback event fired when you click the `Add` button which will appear when `addNewItemOnFilter` setting is enabled.\n    Example : (onAddFilterNewItem)=\"onAddItem($event)\"\n- `onFilterSelectAll` - Callback event fired when the list is filtered and all filtered items are selected with select all filtered items checkbox.\n    Example : (onFilterSelectAll)=\"onFilterSelectAll($event)\"\n- `onFilterDeSelectAll` - Callback event fired when the list is filtered and all filtered items are de-selected with de-select all filtered items checkbox.\n    Example : (onFilterDeSelectAll)=\"onFilterDeSelectAll($event)\"\n\n## Run locally\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 The app will automatically reload if you change any of the source files.\n\n## License\nMIT License.\n","funding_links":[],"categories":["Table of contents","Awesome Angular [![Awesome TipeIO](https://img.shields.io/badge/Awesome%20Angular-@TipeIO-6C6AE7.svg)](https://github.com/gdi2290/awesome-angular) [![Awesome devarchy.com](https://img.shields.io/badge/Awesome%20Angular-@devarchy.com-86BDC1.svg)](https://github.com/brillout/awesome-angular-components)"],"sub_categories":["Third Party Components","Angular \u003ca id=\"angular\"\u003e\u003c/a\u003e"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCuppaLabs%2Fangular2-multiselect-dropdown","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FCuppaLabs%2Fangular2-multiselect-dropdown","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCuppaLabs%2Fangular2-multiselect-dropdown/lists"}