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