@suarsan/ngx-duallistbox

NgxDuallistbox

A full featured and customizable dual list box selector for Angular.

Demo

Try full demo at ngx-duallistbox

Usage

Installation

Install via npm

npm install @suarsan/ngx-duallistbox

Usage

Import NgxDuallistboxModule in your app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

import { NgxDuallistboxModule } from '@suarsan/ngx-duallistbox';

@NgModule({
declarations: [
    AppComponent
],
imports: [
    BrowserModule,
    NgxDuallistboxModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Documentation

Inputs

Input	Type	Default	Required	Description
title	string|undefined	-	false	Show title
inData	Array<Object>	-	true	Set available data list
outData	Array<Object>	-	true	Set selected data list
inputId	string	'id'	false	Select available data items id attribute
outputId	string	'id'	false	Select selected data items id attribute
display	Array<string>	-	true	Select item attributes to show
displaySeparator	string	' - '	false	Select separator between item attributes.
showFilterInput	boolean	false	false	Show filter at available data list
showFilterOutput	boolean	false	false	Show filter at selected data list
filterInputKeys	Array<string>	-	false	Select item attributes to filter at available data list
filterOutputKeys	Array<string>	-	false	Select item attributes to filter at selected data list

Example

<ngx-duallistbox
    [title]="'@suarsan/duallistbox'"
    [inData]="inData" 
    [outData]="outData" 
    [inputId]="'id'" 
    [outputId]="'id'" 
    [display]="['name', 'age']"
    [displaySeparator]="' · '"
    [showFilterInput]="true" 
    [showFilterOutput]="true" 
    [filterInputKeys]="['name']" 
    [filterOutputKeys]="['name']"
></ngx-duallistbox>

---

Creator

Javier Suárez Sánchez

---

Keywords

angular ngx javascript duallistbox dual list box rich customizable

---