open-index/open-npm huggingface dataset:
npm package: @suarsan/ngx-duallistbox
Description: [![npm version](https://badge.fury.io/js/@suarsan%2Fngx-duallistbox.svg)](https://badge.fury.io/js/@suarsan%2Fngx-duallistbox)
Author: Javier Suárez Sánchez
Latest version: 0.0.4

# NgxDuallistbox

[![npm version](https://badge.fury.io/js/@suarsan%2Fngx-duallistbox.svg)](https://badge.fury.io/js/@suarsan%2Fngx-duallistbox)

A full featured and customizable dual list box selector for Angular.

![alt text](https://github.com/Suarsan/ngx-duallistbox/raw/master/projects/suarsan/ngx-duallistbox/demo.png)


## Demo

Try full demo  at **[ngx-duallistbox](https://javiersuarezsanchez.com/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](https://javiersuarezsanchez.com)**




---

### Keywords

`angular` `ngx` `javascript` `duallistbox` `dual` `list` `box` `rich` `customizable`

---
npm package: @suarsan/ngx-flipboardtext
Description: [![npm version](https://badge.fury.io/js/@suarsan%2Fngx-flipboardtext.svg)](https://badge.fury.io/js/@suarsan%2Fngx-flipboardtext)
Author: Javier Suárez Sánchez
Latest version: 0.0.3

# NgxFlipboardtext

[![npm version](https://badge.fury.io/js/@suarsan%2Fngx-flipboardtext.svg)](https://badge.fury.io/js/@suarsan%2Fngx-flipboardtext)

A full featured and customizable flipboard text component for Angular.

![alt text](https://github.com/Suarsan/ngx-flipboardtext/raw/master/projects/suarsan/ngx-flipboardtext/demo.png)


## Demo

Try full demo  at **[ngx-flipboardtext](https://javiersuarezsanchez.com/ngx-flipboardtext)**

## Usage

#### Installation

Install via npm

    npm install @suarsan/ngx-flipboardtext
    
#### Usage

Import ``NgxFlipboardtextModule`` in your app.module.ts

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { AppComponent } from './app.component';
    
    import { NgxFlipboardtextModule } from '@suarsan/ngx-flipboardtext';

    @NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        NgxFlipboardtextModule
    ],
    providers: [],
    bootstrap: [AppComponent]
    })
    export class AppModule { }

## Documentation

#### Inputs

| Input | Type | Default | Required | Description |
| ----- | ---- | ------  | -------- | ----------- |
| keys | `Array<string>` | - | true | Array of key string to show |
| cycleDuration | `number` | 15000 | false | Animations duration in ms |
| fontSize | `string` | '2rem' | false | Font size |
| breakRatio | `number` | 0.75 | false | Time relation between show text and flip text |
| backgroundColor | `string` | '#2cc4d2' | false | Background color |
| textColor | `string` | '#ffffff' | false | Text color |

#### Example

    <ngx-flipboardtext
        [keys]="['hello', 'I am', 'John DOE']"
        [cycleDuration]="5000"
        [fontSize]="'5rem'"
        [breakRatio]="0.85"
        [backgroundColor]="'#FF0000'" 
        [textColor]="'#00FF00'"
    ></ngx-flipboardtext>


---

## Creator

**[Javier Suárez Sánchez](https://javiersuarezsanchez.com)**




---

### Keywords

`angular` `ngx` `javascript` `flipboardtext` `flip` `board` `text` `flipboard` `animation`

---
npm package: @suarsan/ngx-keyvalue
Description: [![npm version](https://badge.fury.io/js/@suarsan%2Fngx-keyvalue.svg)](https://badge.fury.io/js/@suarsan%2Fngx-keyvalue)
Author: Javier Suárez Sánchez
Latest version: 0.0.15

# NgxKeyvalue

[![npm version](https://badge.fury.io/js/@suarsan%2Fngx-keyvalue.svg)](https://badge.fury.io/js/@suarsan%2Fngx-keyvalue)

A full featured and customizable key/value pairs generator for Angular.

![alt text](https://github.com/Suarsan/ngx-keyvalue/raw/master/projects/suarsan/ngx-keyvalue/demo.PNG)


## Demo

Try full demo  at **[ngx-keyvalue](https://javiersuarezsanchez.com/ngx-keyvalue)**

## Usage

#### Installation

Install via npm

    npm install @suarsan/ngx-keyvalue
    
#### Usage

Import ``NgxKeyvalueModule`` in your app.module.ts

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { AppComponent } from './app.component';
    
    import { NgxKeyvalueModule } from '@suarsan/ngx-keyvalue';

    @NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        NgxKeyvalueModule
    ],
    providers: [],
    bootstrap: [AppComponent]
    })
    export class AppModule { }

## Documentation

#### Inputs

| Input | Type | Default | Required | Description |
| ----- | ---- | ------  | -------- | ----------- |
| input | `Array<Item>` | [] | false | Input data |

#### Example

    <ngx-keyvalue [input]="data" (changes)="listenChanges($event)"></ngx-keyvalue>

---

## Creator

**[Javier Suárez Sánchez](https://javiersuarezsanchez.com)**




---

### Keywords

`angular` `ngx` `javascript` `keyvalue` `key` `value` `list` `rich` `customizable`

---