# ng-emoji-button-picker

> Angular Emoji Picker using button

Latest version **1.2.1** (published 2019-05-23) · 0 weekly downloads

## Install

```sh
npm install ng-emoji-button-picker
pnpm add ng-emoji-button-picker
yarn add ng-emoji-button-picker
bun add ng-emoji-button-picker
```

## 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.2.1 |
| Published | 2019-05-23 |
| First published | 2019-05-09 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 519.2 KB |
| Known vulnerabilities | 0 (+15 in 2 direct dependencies) |
| Install scripts | no |
| Maintainers | suraj7986 |
| Keywords | angular, emoji, picker, emoji button, angular emoji picker |

## Links

- npm: https://www.npmjs.com/package/ng-emoji-button-picker
- Repository: https://github.com/usuraj-opentext/emoji-button-picker
- Homepage: https://github.com/usuraj-opentext/emoji-button-picker#readme
- Issues: https://github.com/usuraj-opentext/emoji-button-picker/issues
- npm.io page: https://npm.io/package/ng-emoji-button-picker

## Dependencies (4)

- [rxjs](https://npm.io/package/rxjs.md) 6.2.1
- [@angular/core](https://npm.io/package/@angular/core.md) ^6.0.7
- [@angular/forms](https://npm.io/package/@angular/forms.md) ^6.0.7
- [@angular/common](https://npm.io/package/@angular/common.md) ^6.0.7

## Recent versions

- 1.2.1 (latest) — 2019-05-23
- 1.1.9 — 2019-05-22
- 1.1.8 — 2019-05-22
- 1.1.7 — 2019-05-09
- 1.1.6 — 2019-05-09
- 1.1.5 — 2019-05-09
- 1.1.4 — 2019-05-09
- 1.1.1 — 2019-05-09
- 1.1.0 — 2019-05-09
- 1.0.0 — 2019-05-09

## README

# Angular Emoji Button Picker
[![npm version](https://d25lcipzij17d.cloudfront.net/badge.svg?id=js&type=6&v=1.2.1&x2=0)](https://www.npmjs.com/package/ng-emoji-button-picker)

### Important / Credits
This package is based on https://github.com/lbertenasco/ng-emoji-picker
Since that repository uses only input fields, I have rewritten it to use a button

## Usage
Install through npm or yarn
```bash
npm install ng-emoji-button-picker --save # Angular >= 6
# same with yarn
yarn add ng-emoji-button-picker
```
In your module file for your angular project.
```javascript
import {EmojiPickerModule} from 'ng-emoji-button-picker';

@NgModule({
  ...
  imports: [
      EmojiPickerModule
  ],
  ...
})
```
## Components
`<emoji-input>`
```html
  <emoji-picker></emoji-picker>
```
#### Parameters
`[popupAnchor]` : ['top' (default) : 'bottom']
Where to anchor the emoji popup

`[inputElement]` : Reference of the input element where you want to emoji to be inserted

`[onEnter]` : method to run when users presses enter key. If you want to use your parent scope inside the function make sure to bind the function (`[onEnter]="onEnterFunction.bind(this)"`)

`[(model)]` : model value to two-way bind to input fields ngModel

`[inputClass]` : assigns a class name to the emoji input or textArea.

`[closeAfterSelection]` : boolean: defaults `true`. If true closes the emoji popup after selecting an emoji.

`(setPopupAction)` : outputs a binding function to `this.openPopup(status: boolean = null)`. Call the function without parameters to toggle the picker popup.

`(keyup)` : outputs the keyup event on the textarea/input.

`(focus)` : outputs the event when focus on the textarea/input.

`(blur)` : outputs the event when blur outside the textarea/input.

`(emojiClick)` : outputs the emoji character clicked.



##### Example
```javascript
@Component({})

export class ExampleComponent {

  inputText: string = '';
  openPopup: Function;
  @ViewChild('inputEl') inputEl;

  setPopupAction(fn: any) {
    this.openPopup = fn;
  }
}
```
```html
<div style="max-width: 500px; display: inline-block;">
  <input #inputEl type="text" [(ngModel)]="inputText">
</div>
<emoji-picker
  [(model)]="inputText" 
  [inputClass]="'red'"
  [closeAfterSelection]="true" 
  style="display: inline-block;"
  (click)="openPopup()" 
  (setPopupAction)="setPopupAction($event)" 
  [inputElement]="inputEl">
</emoji-picker>
```

### Demo project available here: https://github.com/usuraj-opentext/emoji-button-picker-demo

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