Ng2-listbox-dual NPM

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 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>