@suarsan/ngx-duallistbox
TypeScript icon, indicating that this package has built-in type declarations

0.0.4 • 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/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


Package Sidebar

Install

npm i @suarsan/ngx-duallistbox

Weekly Downloads

1

Version

0.0.4

License

none

Unpacked Size

151 kB

Total Files

14

Last publish

Collaborators

  • suarsan