ng2-dual-list-box
An Angular 4 component inspired by the following jQuery library: https://github.com/Geodan/DualListBox
Uses Bootstrap 3 classes for styling and responsiveness
Documentation
Full documentation available at http://ng2-duallistbox-docs.surge.sh/
Demo
http://ng2-duallistbox-demo.surge.sh/
Installation
To install this library, run:
$ npm install ng-dual-list-box --save
and then from your Angular AppModule:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DualListBoxModule } from 'ng-dual-list-box';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
DualListBoxModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Use it in your template like this. Check the documentation for other available fields, but these are mandatory
<div class="row">
<div class="col-md-8 col-md-offset-2">
<ng2-dual-list-box [data]="items" valueField="id" textField="name"
(onAvailableItemSelected)="log($event)"
(onSelectedItemsSelected)="log($event)"
(onItemsMoved)="log($event)"></ng2-dual-list-box>
</div>
</div>
You can also use ngModel and formControlName. When this is used the variable or form control used will have the value of the selected list box.
<div class="row">
<div class="col-md-8 col-md-offset-2">
<ng2-dual-list-box [data]="items" valueField="id" textField="name"
[(ngModel)]="selected"
(onAvailableItemSelected)="log($event)"
(onSelectedItemsSelected)="log($event)"
(onItemsMoved)="log($event)"></ng2-dual-list-box>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2" [formGroup]="form">
<ng2-dual-list-box [data]="items" valueField="id" textField="name"
formControlName="selected"
(onAvailableItemSelected)="log($event)"
(onSelectedItemsSelected)="log($event)"
(onItemsMoved)="log($event)"></ng2-dual-list-box>
</div>
</div>
Development
To generate all *.js, *.d.ts and *.metadata.json files:
To lint all *.ts files:
License
MIT © Eldar Granulo
