ng2-listbox-dual
An Angular 6 component inspired by the following jQuery library: https://github.com/Geodan/DualListBox
Uses Bootstrap 3 classes for styling and responsiveness
Documentation
| Option |
Type |
Default |
Description |
data |
Array<{}> |
[] |
List of available objects. |
selected |
Array<{}> |
[] |
List of selected objects. |
valueField |
String |
id |
Field of the object to get value. |
textField |
Array |
["name"] |
Field(s) of the object to show. |
separator |
String |
" - " |
The separator beetween fields (textField) to show. |
Demo
http://ng2-duallistbox-demo.surge.sh/
Installation
To install this library, run:
$ npm install ng2-listbox-dual --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 'ng2-listbox-dual';
@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" [selected]="list" 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" [selected]="list" 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" [selected]="list" 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 © Cristina Guerra