An Angular 6 component inspired by the following jQuery library: https://github.com/Geodan/DualListBox
Uses Bootstrap 3 classes for styling and responsiveness
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. |
http://ng2-duallistbox-demo.surge.sh/
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 your library
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>
To generate all *.js
, *.d.ts
and *.metadata.json
files:
$ npm run build
To lint all *.ts
files:
$ npm run lint
MIT © Cristina Guerra