Angular 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

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.

import {EmojiPickerModule} from 'ng-emoji-button-picker';

@NgModule({
  ...
  imports: [
      EmojiPickerModule
  ],
  ...
})

Components

<emoji-input>

  <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

@Component({})

export class ExampleComponent {

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

  setPopupAction(fn: any) {
    this.openPopup = fn;
  }
}

<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