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 your library
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:

$ npm run build

To lint all *.ts files:

$ npm run lint

Deployment

An overkill way to package this up is:

$ npm run build
$ gulp copy:source
$ gulp inline-resources
$ gulp ngc
$ gulp rollup:fesm
$ gulp rollup:umd
$ gulp copy:build
$ cd dist/
$ npm publish

Someone please tell me that all of these are not required. However, npm run build is never sufficient.

License

MIT © Eldar Granulo