# oe-select

> dropdown component for Angular 2, with Google Material 2 utilised

Latest version **1.0.8** (published 2016-09-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install oe-select
pnpm add oe-select
yarn add oe-select
bun add oe-select
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.8 |
| Published | 2016-09-15 |
| First published | 2016-08-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 13 |
| Known vulnerabilities | 0 (+24 in 4 direct dependencies) |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Lida Weng |
| Maintainers | oelite |
| Keywords | Dropdown, select, Angular2, material, AngularMaterial2, MaterialDesign, multi-select, dropdown |

## Links

- npm: https://www.npmjs.com/package/oe-select
- Repository: https://github.com/oelite/oe-select
- Homepage: https://github.com/oelite/oe-select#readme
- Issues: https://github.com/oelite/oe-select/issues
- npm.io page: https://npm.io/package/oe-select

## Dependencies (13)

- [@angular/core](https://npm.io/package/@angular/core.md) ^2.0.0-rc.5
- [@angular/http](https://npm.io/package/@angular/http.md) ^2.0.0-rc.5
- [@angular/forms](https://npm.io/package/@angular/forms.md) ^0.3.0
- [@angular/common](https://npm.io/package/@angular/common.md) ^2.0.0-rc.5
- [@angular/router](https://npm.io/package/@angular/router.md) ^3.0.0-rc.1
- [@angular/compiler](https://npm.io/package/@angular/compiler.md) ^2.0.0-rc.5
- [@angular2-material/card](https://npm.io/package/@angular2-material/card.md) ^2.0.0-alpha.7-4
- [@angular2-material/core](https://npm.io/package/@angular2-material/core.md) ^2.0.0-alpha.7-4
- [@angular2-material/icon](https://npm.io/package/@angular2-material/icon.md) ^2.0.0-alpha.7-4
- [@angular2-material/input](https://npm.io/package/@angular2-material/input.md) ^2.0.0-alpha.7-4
- [@angular/platform-browser](https://npm.io/package/@angular/platform-browser.md) ^2.0.0-rc.5
- [@angular2-material/button](https://npm.io/package/@angular2-material/button.md) ^2.0.0-alpha.7-4
- [@angular/platform-browser-dynamic](https://npm.io/package/@angular/platform-browser-dynamic.md) ^2.0.0-rc.5

## Recent versions

- 1.0.8 (latest) — 2016-09-15
- 1.0.7 — 2016-08-27
- 1.0.6 — 2016-08-23
- 1.0.5 — 2016-08-23
- 1.0.4 — 2016-08-23
- 1.0.3 — 2016-08-23
- 1.0.2 — 2016-08-23
- 1.0.1 — 2016-08-23
- 1.0.0 — 2016-08-23

## README

# Dropdown Component for Angular 2 (with Google Material 2)
<img src="demo/screenshot1.png" style="width:100%"/>
<img src="demo/screenshot2.png" style="width:100%"/>
<img src="demo/screenshot3.png" style="width:100%"/>
### Dependencies

* Google Material (Angular Material 2) - MdInputModule, MdIconModule
* Angular 2, RC5

### Usage

Simply reference the **OE_MD_SelectModule** same way as you import other modules, and then start using <oe-select> and <oe-option> as explained below
#### Import Module: OE_MD_SelectModule
##### Angular 2 - RC5
```javascript
@NgModule({
    imports:[CommonModule, OE_MD_SelectModule],
    declarations:[],
    providers:[],
    exports:[]
})
export class YourModule{
}

```

### Simple Examples

```html
                <oe-select placeHolder="love my own work" [items]="[{a:'abc',b:1,c:true},{a:'bcd',b:2},{a:'cde',b:3}]" [allowMultiple]="true">
                </oe-select>
                <oe-select placeHolder="disabled one" [disabled]="true"
                           [items]="[{a:'abc',b:1},{a:'bcd',b:2},{a:'cde',b:3}]">
                </oe-select>
```


### Elements and Attributes

### <oe-select>
the wrapper of the dropdown, equivalent to <select></select>

#### properties
| Property | value type | description |
|---|---|---|
| **items** | object array | defines an **array** of data items for the dropdown to use |
| **selectorId** | string | definea the name of the current selector - a GUID will be populated as selectorId if it is not manually defined |
| **selectedItems** | object array | returns a list of selected items (if it is a single item selection dropdown, it will have maximum 1 item in the returned array) |
| **selectedText** | string | returns the current selected text; or the default placeholder text if no item selected |
| **placeHolder** | string | defines the default placeholder for the dropdown |
| **disabled** | bool | defines whether the current dropdown is disabled |
| **textBinding** | string | defines a property name from the object in **item** array, the value of the property from the object will be injected as the item options' display **text** |
| **valueBinding** | string | defines a property name from the object in **item** array, the value of the property from the object will be injected as the item options' display **value** |
| **stateBinding** | string | defines a property name from the object in **item** array, the value of the property from the object will be injected as the item options' display **isSelected** |
| **allowMultiple** | bool | define whether the dropdown allows selecting multiple items |


#### events
| Events | parameters | return value | description |
|---|---|---|---|
| onItemSelected($event) | $event | void | define a custom event using the (onItemSelected) property binding in <oe-select> to execute your own function when an item is **selected**, the $event contains the selected item data |
| onItemDeselected($event) | $event | void | define a custom event using the (onItemSelected) property binding in <oe-select> to execute your own function when an item is **deselected**, the $event contains the deselected item data |

````html
                <oe-select placeHolder="love my own work" [items]="[{a:'abc',b:1,c:true},{a:'bcd',b:2},{a:'cde',b:3}]"
                           valueBinding="b" textBinding="a" stateBinding="c"
                           (onItemDeselected)="onItemDeselected($event)"
                           (onItemSelected)="onItemSelected($event)"
                           [allowMultiple]="true">
                    <oe-option text="Manual Add 1" value="1234"></oe-option>
                    <oe-option text="Manual Add 2" value="1234"></oe-option>
                </oe-select>

 ````
* NOTE: -- remember to define the "onItemDeselected($event)" and "onItemSelected($event)" function in your component if you specified them in the property bindings

#### methods
| Methods | parameters | return value | description |
|---|---|---|---|
| show() | - | void | triggers the dropdown list to be shown |
| close() | - | void | triggers the dropdown list to be closed (if is shown) |

 


### <oe-option>
option items of the dropdown, equivalent to <option></option>
* NOTE: if all your data is loaded dynamically using the data items variable in <oe-select>, then you don't need to worry about using the <oe-option> which allows you to specify option items without a data load

#### properties
| Property | value type | description |
|---|---|---|
| **item** | object | defines an object which can be automatically loaded same way like other objects in the array, using the config options defined in <oe-select> |
| **text** | string | define the text displayed for the dropdown item; if no **item** object is defined, this **text** value will be automatically assigned onto an **item** object automatically for the component |
| **value** | string, any | defines the value to be assigned to the dropdown item; if no **item** object is defined, this **value** will be automatically assigned onto an **item** object for the component |
| **isSelected** | bool | define whether the item should be marked as selected |

#### methods
| Method | parameters | return value | description |
|---|---|---|---|
| toggleSelect() | - | void | trigger toggle events for the current option |

---
_Source: https://npm.io/package/oe-select · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._