JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 318
  • Score
    100M100P100Q100911F
  • License MIT

Package Exports

  • ng2-dual-list-box

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ng2-dual-list-box) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

NPM

Build Status Coverage Status

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

License

MIT © Eldar Granulo