{"id":15573009,"url":"https://github.com/angularwizards/ng2-mouse-select","last_synced_at":"2025-10-12T09:36:13.604Z","repository":{"id":120778152,"uuid":"119258345","full_name":"AngularWizards/ng2-mouse-select","owner":"AngularWizards","description":"Angular 2 directive for selecting multiple items with the mouse.","archived":false,"fork":false,"pushed_at":"2018-04-19T18:44:41.000Z","size":1368,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-24T09:25:00.371Z","etag":null,"topics":["angular","angular2","items","mouse","multiple-items","select","selection"],"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/AngularWizards.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"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":"2018-01-28T12:58:24.000Z","updated_at":"2018-12-18T15:52:01.000Z","dependencies_parsed_at":null,"dependency_job_id":"9819c5c0-3cf1-4a45-b977-24831ab16e97","html_url":"https://github.com/AngularWizards/ng2-mouse-select","commit_stats":{"total_commits":95,"total_committers":3,"mean_commits":"31.666666666666668","dds":0.09473684210526312,"last_synced_commit":"56d13cba859edbed9a3c0efd0ec16df35a43819d"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AngularWizards%2Fng2-mouse-select","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AngularWizards%2Fng2-mouse-select/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AngularWizards%2Fng2-mouse-select/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AngularWizards%2Fng2-mouse-select/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AngularWizards","download_url":"https://codeload.github.com/AngularWizards/ng2-mouse-select/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246149912,"owners_count":20731405,"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","angular2","items","mouse","multiple-items","select","selection"],"created_at":"2024-10-02T18:09:47.333Z","updated_at":"2025-10-12T09:36:08.577Z","avatar_url":"https://github.com/AngularWizards.png","language":"TypeScript","readme":"# ng2-mouse-select  \n\nNative Angular 2 directives for selecting multiple items with the mouse. \n\n[![npm version](https://badge.fury.io/js/ng2-mouse-select.svg)](https://badge.fury.io/js/ng2-mouse-select)  [![Build Status](https://travis-ci.org/AngularWizards/ng2-mouse-select.svg?branch=master)](https://travis-ci.org/AngularWizards/ng2-mouse-select)\n\n## Table of contents\n\u003cul\u003e\n     \u003cli\u003e\u003ca href=\"#description\"\u003eDescription\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#installation\"\u003eInstallation\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#usage\"\u003eUsage\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#directives\"\u003eDirectives\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#scoping\"\u003eScoping\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\n\n## Description\n\nThis library has following features:\n\n- Adding user-specific class(es) to selected items.\n\n- Works well with other directives, i.e. drag\u0026drop.\n\n- Preserves selection till clicked away from the `selectable` items.\n  If `clearOnUnselected` option is used, selection is also canceled when clicking on previously unselected, but also `selectable` items.\n\n- With **cmd** (ctrl) button you can either **continue adding elements to previous selection**, or **selectively add/remove item** to new/existing selection.\n\n- With the configuration of the `filter` you can determine on which elements will the directive be active, that is, on which elements will the selection be started. (Useful for enabling other directives on items that need other behaviour, like drag\u0026drop).\n  \n- As of version 0.4, \u003ca href=\"#scoping\"\u003escoping\u003c/a\u003e is supported. In this case, only items with the scope of the first selected item get in the selection.\n\n- Able to ensure sameness. If `ensureSame` is used, only items with the same properties and corresponding values as those from the first selected item get in the selection.\n\n- Able to change color of the selector frame dynamically.\n\n\n\n\n## Installation\n\n\n```bash\n$ npm install ng2-mouse-select\n```\n\n## Usage\n\n```typescript\n\n// Import your library\nimport { SelectableModule } from 'ng2-mouse-select';\n\n@NgModule({\n    ...\n    imports: [\n      ...\n        SelectableModule\n    ],\n   ...\n})\n```\n\n```xml\n\u003c!-- You can now use your library component in some.component.html --\u003e\n\u003c!-- Example: --\u003e\n \u003cdiv app-selectFrame [selectorColor]=\"'#CC0000'\"\n         [ensureSame]=\"['property1','property2']\" \n         [clearOnUnselected]=\"false\"\n         [filter]=\"{ allowSelectElements: true, thisElement: true }\" \n         (data)=\"onMousePalletsSelected($event)\"\u003e\n\n\u003cdiv appAllowSelect\u003e\n....\n \u003ctr some-component  \n     selectable [selectScope]=\"'someScope'\"  [selectedClass]=\"'mySpecialClassNameForSelectedItems'\" \n     [someClassAsInputForTheComponent]=\"someClass\"\n     [select]=\"{'property1':someClass.data1,'property2':someClass.data2}\"\u003e\n  \u003c/tr\u003e\n....\n\u003c/div\u003e\n\n```\n\n## Directives\n\n### app-selectFrame directive\n\n`app-selectFrame` - component that holds the selectable components/directives.\n\n#### Inputs\n\n`ensureSame`:`Array\u003cstring\u003e` - array of properties. When defined, only those items are selectable, which have the same properties and the same corresponding values as the first item that was selected. \n\n`clearOnUnselected`:`boolean` - default false. When true, selection is cleared also when user clicks on selectable but unselected items. Normally, selection is cleared only when the user clicks away from the selectable item(s). \n\n`filter`:`{ allowSelectElements: boolean, thisElement: boolean }` - On default behaviour, selection is active on the document. However, sometimes we want to exclude the selection directive on some items, so that other directives can do their work. \n\nWith `allowSelectElements:true` we say that the selection is enabled on all elements with `appAllowSelect` directive. \nSetting `thisElement:true` sets just the `app-selectFrame` as the element on which the selection is available.\nElements that were enabled with `appAllowSelect` get added to the list of element on which the selection gets started.\n\n\n`selectorColor` - Default yellow. Dynamically changeable.\n\n#### Events \n\n`data:Array\u003cany\u003e` - Data which is returned on the end of the selection. If nothing was selected, [] is returned. \n\nAs of version, scoping is enabled. If you are using scope, outputed data changes format. See the section on \u003ca href=\"#scoping\"\u003escoping\u003c/a\u003e.\n\n\n\n### appAllowSelect directive\n\nAllows a selection on the HTML element, when `filter` option is used.\n\n\n### noSelect directive\n\nBlocks text-selection from the element and its descendants.\n\n\n### selectable directive\n\n#### Inputs\n\n`select` - here you can set the the object(s) you want to pass with the selection. See one example above.\n\n`selectedClass` - default 'selected'. Here you set the name of the class that will style your `selectable` directive when it is selected.\n\n`selectedScope` - default null. See section on \u003ca href=\"#scoping\"\u003escoping\u003c/a\u003e.\n\n\n## Scoping\n\nAs of version 0.4. scoping is supported. That means that selectable items are grouped based on scope. When enabled, only elements with the same scope can come into selection. This is done on the level of the selectable items.\nWhen used, data that you get back gets a bit changed.\nFor instance, if before scoping, to get your data, you used: \n\n```typescript\ndata=ev;\n```\n, with the `'pallets'` scope you would write:\n\n```typescript\ndata=ev[pallets];\n```\n\n## License\n\nMIT © [Angular Wizards](https://github.com/AngularWizards/ng2-mouse-select/blob/master/LICENSE)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangularwizards%2Fng2-mouse-select","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fangularwizards%2Fng2-mouse-select","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangularwizards%2Fng2-mouse-select/lists"}