https://github.com/angularwizards/ng2-mouse-select
Angular 2 directive for selecting multiple items with the mouse.
https://github.com/angularwizards/ng2-mouse-select
angular angular2 items mouse multiple-items select selection
Last synced: 3 months ago
JSON representation
Angular 2 directive for selecting multiple items with the mouse.
- Host: GitHub
- URL: https://github.com/angularwizards/ng2-mouse-select
- Owner: AngularWizards
- License: mit
- Created: 2018-01-28T12:58:24.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-04-19T18:44:41.000Z (over 7 years ago)
- Last Synced: 2024-04-24T09:25:00.371Z (over 1 year ago)
- Topics: angular, angular2, items, mouse, multiple-items, select, selection
- Language: TypeScript
- Homepage:
- Size: 1.3 MB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ng2-mouse-select
Native Angular 2 directives for selecting multiple items with the mouse.
[](https://badge.fury.io/js/ng2-mouse-select) [](https://travis-ci.org/AngularWizards/ng2-mouse-select)
## Table of contents
## Description
This library has following features:
- Adding user-specific class(es) to selected items.
- Works well with other directives, i.e. drag&drop.
- Preserves selection till clicked away from the `selectable` items.
If `clearOnUnselected` option is used, selection is also canceled when clicking on previously unselected, but also `selectable` items.
- With **cmd** (ctrl) button you can either **continue adding elements to previous selection**, or **selectively add/remove item** to new/existing selection.
- 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&drop).
- As of version 0.4, scoping is supported. In this case, only items with the scope of the first selected item get in the selection.
- 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.
- Able to change color of the selector frame dynamically.
## Installation
```bash
$ npm install ng2-mouse-select
```
## Usage
```typescript
// Import your library
import { SelectableModule } from 'ng2-mouse-select';
@NgModule({
...
imports: [
...
SelectableModule
],
...
})
```
```xml
....
....
```
## Directives
### app-selectFrame directive
`app-selectFrame` - component that holds the selectable components/directives.
#### Inputs
`ensureSame`:`Array` - 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.
`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).
`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.
With `allowSelectElements:true` we say that the selection is enabled on all elements with `appAllowSelect` directive.
Setting `thisElement:true` sets just the `app-selectFrame` as the element on which the selection is available.
Elements that were enabled with `appAllowSelect` get added to the list of element on which the selection gets started.
`selectorColor` - Default yellow. Dynamically changeable.
#### Events
`data:Array` - Data which is returned on the end of the selection. If nothing was selected, [] is returned.
As of version, scoping is enabled. If you are using scope, outputed data changes format. See the section on scoping.
### appAllowSelect directive
Allows a selection on the HTML element, when `filter` option is used.
### noSelect directive
Blocks text-selection from the element and its descendants.
### selectable directive
#### Inputs
`select` - here you can set the the object(s) you want to pass with the selection. See one example above.
`selectedClass` - default 'selected'. Here you set the name of the class that will style your `selectable` directive when it is selected.
`selectedScope` - default null. See section on scoping.
## Scoping
As 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.
When used, data that you get back gets a bit changed.
For instance, if before scoping, to get your data, you used:
```typescript
data=ev;
```
, with the `'pallets'` scope you would write:
```typescript
data=ev[pallets];
```
## License
MIT © [Angular Wizards](https://github.com/AngularWizards/ng2-mouse-select/blob/master/LICENSE)