Angular Dual-Listbox (v14, v15, v16 and v17)

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.

Table of Contents

• Version
• Usage
• Inputs
• Outputs
• Final Usage

Version

| Angular | angular-dual-listbox | | ------- | -------------------- | | 17 | 4.0.0 | | 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 { CmAngularDualListboxComponent } from "cm-angular-dual-listbox";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, CmAngularDualListboxComponent],
  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

• Maram Chandrasekhar Reddy @chandumaram