https://github.com/ouracademy/ngx-dual-listbox

A dual list box component for Angular 2+
https://github.com/ouracademy/ngx-dual-listbox

angular angular4 ui-component

Last synced: about 1 year ago
JSON representation

A dual list box component for Angular 2+

• Host: GitHub
• URL: https://github.com/ouracademy/ngx-dual-listbox
• Owner: ouracademy
• License: mit
• Created: 2017-08-19T22:03:30.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2017-09-11T04:05:29.000Z (almost 9 years ago)
• Last Synced: 2025-03-29T12:51:22.124Z (over 1 year ago)
• Topics: angular, angular4, ui-component
• Language: TypeScript
• Homepage: https://ouracademy.github.io/ngx-dual-listbox/
• Size: 3.78 MB
• Stars: 2
• Watchers: 1
• Forks: 2
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# ngx-dual-listbox / Angular dual list box

[![Build Status](https://travis-ci.org/ouracademy/ngx-dual-listbox.svg?branch=master)](https://travis-ci.org/ouracademy/ngx-dual-listbox)

[![codecov](https://codecov.io/gh/ouracademy/ngx-dual-listbox/branch/master/graph/badge.svg)](https://codecov.io/gh/ouracademy/ngx-dual-listbox)

[![npm version](https://badge.fury.io/js/ngx-dual-listbox.svg)](http://badge.fury.io/js/ngx-dual-listbox)

[![devDependency Status](https://david-dm.org/ouracademy/ngx-dual-listbox/dev-status.svg)](https://david-dm.org/ouracademy/ngx-dual-listbox?type=dev)

[![GitHub issues](https://img.shields.io/github/issues/ouracademy/ngx-dual-listbox.svg)](https://github.com/ouracademy/ngx-dual-listbox/issues)

[![GitHub stars](https://img.shields.io/github/stars/ouracademy/ngx-dual-listbox.svg)](https://github.com/ouracademy/ngx-dual-listbox/stargazers)

[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/ouracademy/ngx-dual-listbox/master/LICENSE)

## Demo

https://ouracademy.github.io/ngx-dual-listbox/

## Table of contents

- [About](#about)

- [Installation](#installation)

- [Documentation](#documentation)

- [Development](#development)

- [License](#license)

## About

A dual list box component for Angular 2+

## Installation

Install through npm:

```

npm install --save ngx-dual-listbox

```

Then include in your apps module:

```typescript

import { NgModule } from '@angular/core';

import { NgxDualListboxModule } from 'ngx-dual-listbox';

@NgModule({

  imports: [

    NgxDualListboxModule.forRoot()

  ]

})

export class MyModule {}

```

Finally use in one of your apps components:

```typescript

import { Component } from '@angular/core';

@Component({

  template: `

    

    

  `

})

export class MyComponent {

  items: any[] = [

    { id: 1, name: 'Movie 1', url: '' },

    { id: 2, name: 'Movie 2', url: '' },

    { id: 3, name: 'Movie 3', url: '' },

    { id: 4, name: 'Movie 4', url: '' },

    { id: 5, name: 'Movie 5', url: '' }

  ];

  selectedItems: any[] = [{ id: 1, name: 'Movie 1', url: '' }];

}

```

You may also find it useful to view the [demo source](https://github.com/ouracademy/ngx-dual-listbox/blob/master/demo/demo.component.ts).

### Usage without a module bundler

```

    // everything is exported ngxDualListbox namespace

```

## Documentation

All documentation is auto-generated from the source via [compodoc](https://compodoc.github.io/compodoc/) and can be viewed here:

https://ouracademy.github.io/ngx-dual-listbox/docs/

## Development

### Prepare your environment

* Install [Node.js](http://nodejs.org/) and NPM

* Install local dev dependencies: `npm install` while current directory is this repo

### Development server

Run `npm start` to start a development server on port 8000 with auto reload + tests.

### Testing

Run `npm test` to run tests once or `npm run test:watch` to continually run tests.

### Release

* Bump the version in package.json (once the module hits 1.0 this will become automatic)

```bash

npm run release

```

## License

MIT