Angular Dual-Listbox

The angular-dual-listbox is an Angular 2+ component that provides two lists controls side-by-side that allows items in one list to be moved to the other list via drag-and-drop and/or a button-based interface. The component supports multiple select options from the list, programatic setting of list sources, and layout with direction and button formatting.

A working demo shows the dual listbox in action.

How to use?

$ npm i angular-dual-listbox --save

Integration

The angular-dual-listbox should work as-is with webpack/angular-cli. Just add the AngularDualListBoxModule:

import { AngularDualListBoxModule } from 'angular-dual-listbox';

@NgModule({
    imports: [ AngularDualListBoxModule ],
    ...
})
export class AppModule {}

Usage

Basic usage is:

<dual-list [source]="source" [(destination)]="confirmed"></dual-list>

The following parameters can be set on a dual-list:

key - The unique identifier field of each object in the source and destination arrays, default is _id. (With a source of an array of strings, each string is its own id.)
display - The field of each object for displaying the object each the lists, default is _name. (With a source of an array of strings, each string is its own display.)
height - The height of the lists, default is 100px.
format - A format object, default is { add: 'Add', remove: 'Remove', all: 'All', none: 'None', direction: 'left-to-right' }
filter - A boolean whether or not to display a filter for the lists, default is false.
sort - A boolean whether or not to keep the lists sorted, default is false.
compare - A compare function to be used for sorting the lists. Note if sort is not set and compare is set, then sort will be set true.
source - The source array of objects or strings for the list. (This is the universal, master list of all possible objects.)
destination The destination array of objects or strings selected from the source. Note, the destination array can have prexisting elements.

For more usage examples, see the demo-app.component.ts.

Extending

The html template packaged with this component is based on Bootstap 3; however it can be overridden for customization. Here is an example:

import { Component } from '@angular/core';
import { DualListComponent } from 'angular-dual-listbox/index';

@Component({
    selector: 'custom-dual-list',
    templateUrl: './custom-dual-list.component.html',
    styleUrls: [ './custom-dual-list.component.css' ]
})
export class CustomDualListComponent extends DualListComponent {
}

See dual-list.component.html and dual-list.component.css for template and style guidance.

Known issue

The drag-and-drop between multiple <dual-list> components may cause undesired moves. For the time being, if the component is used, then it is recommended only have one <dual-list> visable to the user at a time.

Contributions

Contributions may be welcomed depending on impact on the core functionality of the project. In order for pull requests to be accepted, they must include a sign-off in git (See git-commit --signoff) certifying the contribution is your own work, are subitting under the project's original license, and agreeing to the Developer Certificate of Origin.

License

MIT

Author

David Czeck @czeckd

infact/angular-dual-listbox