Skip to content

Latest commit

 

History

History
130 lines (99 loc) · 4.74 KB

README.md

File metadata and controls

130 lines (99 loc) · 4.74 KB

Angular Dual-Listbox (v14, v15 and v16)

The angular-dual-listbox is an Angular component that provides two lists controls side-by-side that allows items in one list to be selected and 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.

Dual ListBox

Table of Contents

Version

Angular angular-dual-listbox
16 3.0.0
15 2.1.1
14 1.0.0

Usege

Installation

$ npm i cm-angular-dual-listbox

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CmAngularDualListboxModule } from 'cm-angular-dual-listbox';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    CmAngularDualListboxModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html:

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

app.component.ts:

export class AppComponent {

  employeeImage = "assets/employee.png";

  source: any[] = [
    {id:1, name:"one"},
    {id:2, name:"two"},
    {id:3, name:"three"},
    {id:4, name:"four"},
    {id:5, name:"five"},
    {id:6, name:"six"}
    ];

  confirmed: any[] = [];

  format = { 
    add: 'Add', 
    remove: 'Remove', 
    all: 'All', 
    none: 'None', 
    direction: CmAngularDualListboxComponent.LTR, 
    draggable: true 
    };
}

Inputs

Name Description
key The unique identifier field of each object in the source and destination arrays, default is _id. (Note: 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. Or, a function that returns a string that can be used for displaying an object. (Note: 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', draggable: true, locale: undefined }
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.
disabled The dual-list is disabled, default is false.

Outputs

Name Description
destinationChange An event triggered when the destination array changes.

Final Usage

<dual-listbox [sort]="true" [source]="source" key="id" display="name"
[filter]="true" [(destination)]="confirmed" height="300px"
[format]="format" [disabled]="false"></dual-listbox>

License

MIT

Author