No Password Management

    @suarsan/ngx-duallistbox

    0.0.3 • Public • Published

    NgxDuallistbox

    npm version

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

    alt text

    Demo

    Try full demo at ngx-duallistbox

    Usage

    Installation

    Install via npm

    npm install @suarsan/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


    Install

    npm i @suarsan/ngx-duallistbox

    DownloadsWeekly Downloads

    8

    Version

    0.0.3

    License

    none

    Unpacked Size

    51.3 kB

    Total Files

    16

    Last publish

    Collaborators

    • suarsan