Angular Multiple Selection Module

A library that allows using two directives to implement multiple selection of elements

Installation

Using npm

npm install ngx-multiple-selection

Usage

• Add the module to the imports in the module where the multiple-selection will be used imports: [NgxMultipleSelectionModule]

• Add ngxMultipleSelectionZone attribute to element where selectable items will be located

<div ngxMultipleSelectionZone>
  //Add selectable items here
</div>

• Add selectedItemsChange attribute to set output handler ($event is array of selected items data)

<div ngxMultipleSelectionZone
  (selectedItemsChange)="onSelectItems($event)"
>
  //Add selectable items here
</div>

• Add ngxMultipleSelectionItem attribute to each selectable item and pass data to this attribute

<div ngxMultipleSelectionZone
  (selectedItemsChange)="onSelectItems($event)"
>
  <div [appMultipleSelectionItem]="1">1</div>
  <div [appMultipleSelectionItem]="2">2</div>
  <div [appMultipleSelectionItem]="3">3</div>
</div>

• You can set variable #selectableItem to see if an item is selected

<div ngxMultipleSelectionZone
  (selectedItemsChange)="onSelectItems($event)"
>
  <div [appMultipleSelectionItem]="1"
    #selectableItem="selectableItem"
    [class.selected]="selectableItem.isSelected"
  >1</div>
</div>

API

import { NgxMultipleSelectionModule } from 'ngx-multiple-selection-module' Zone selector: ngxMultipleSelectionZone Item selector: ngxMultipleSelectionItem

Each selectable item has it`s own angular scope with variables

ngxMultipleSelectionItem scope

| Name | Type | Description | | ------------- | ------- | -------------------------- | | isSelected | boolean | true if element selected | | nativeElement | Element | Element reference |

ngxMultipleSelectionItem @Input()

| Input | Type | Description | | ------------------------ | ---- | ----------------------------------------------------- | | ngxMultipleSelectionItem | T | Data will be passed with selectedItemsChange Output |

ngxMultipleSelectionZone @Output()

| Input | Type | Description | | ------------------- | ---- | -------------------------------------------------------------------- | | selectedItemsChange | T[] | Emits on change selection and represent array of selected items data |