Native Angular 2 directives for selecting multiple items with the mouse.

Usage no npm install needed!

<script type="module">
  import ng2MouseSelect from '';



Native Angular 2 directives for selecting multiple items with the mouse.

npm version Build Status

Table of contents


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.


$ npm install ng2-mouse-select


// Import your library
import { SelectableModule } from 'ng2-mouse-select';

    imports: [
<!-- You can now use your library component in some.component.html -->
<!-- Example: -->
 <div app-selectFrame [selectorColor]="'#CC0000'"
         [filter]="{ allowSelectElements: true, thisElement: true }" 

<div appAllowSelect>
 <tr some-component  
     selectable [selectScope]="'someScope'"  [selectedClass]="'mySpecialClassNameForSelectedItems'" 


app-selectFrame directive

app-selectFrame - component that holds the selectable components/directives.


ensureSame:Array<string> - 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.


data:Array<any> - 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


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.


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:


, with the 'pallets' scope you would write:



MIT © Angular Wizards