0.0.4 • Published 2 years ago
@suarsan/ngx-duallistbox v0.0.4
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-duallistboxUsage
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
Keywords
angular ngx javascript duallistbox dual list box rich customizable