/angular2-multiselect

You can find demo here:

Primary LanguageHTML

Angular 2 Multiselect component

Installation

  • Clone repository
  • Install nodejs
  • Run npm install
  • Run gulp build task

Usage

<multiselect 
  (modelUpdated)="parentCompoentMethod($event)" 
  [multiple]="true" 
  [collection]="items" 
  [label]="'item_key'" 
  [mutiselectModel]="multiselectModel">
</multiselect>
import {Multiselect} from './multiselect';
...

@Component({
    selector: 'demo-component',
    ...
    directives: [Multiselect]
})

export default class DemoComponent {
    ...
    multiselectModel: Array<any> = [];
    parentCompoentMethod(multiselectModel: any) {
        this.multiselectModel1 = multiselectModel;
    }
}

API Documentation

Attribute Name Type Description
multiple true/false If value is true we can select many items, if false only one item
collection array A list of objects for multiselect
label string Key of a object which will be displayed for item
header string Header of multiselect (Default value 'Select')
mutiselectModel array/object Value of model from used component
modelUpdated function Function from used compoent which will update 'multiselectModel' value

Demo & How To

Go to http://igariok1990.github.io/angular2-multiselect/

Licence

The MIT License (MIT)