angular2-emoji-picker

Emoji picker for Angular

This project was forked from the EmojiPanel project created by DanBovey

It's pretty basic right now, not very customizable but propagates necessary emoji selection events and comes with basic search and category selection functionalities.

Demo

Demo uses the sprite sheets

Usage:

import { EmojiPickerModule } from 'angular2-emoji-picker';

@NgModule({
  ...
  imports: [
    EmojiPickerModule.forRoot()
  ],
  ...
})
export class AppModule {}

Use The Sprite Sheet

/** file: app.component.ts */

import { EmojiPickerOptions } from 'angular2-emoji-picker';

/** imported seperately to reduce package size for those who won't use sheets */
import { EmojiPickerAppleSheetLocator } from 'angular2-emoji-picker/sheets';

constructor(private emojiPickerOptions: EmojiPickerOptions) {
  this.emojiPickerOptions.setEmojiSheet({
      url: 'sheet_apple_32.png',
      locator: EmojiPickerAppleSheetLocator
    });
}

include the sheet_apple_32.png file in your build and provide your specific file url

/** .angular-cli.json */

{
  "apps": [
    {
      "assets": [
        { "glob": "sheet_apple_32.png", "input": "../node_modules/angular2-emoji-picker/sheets/", "output": "./" }
      ]
    }
  ]
}

Generate Emoji Element

/** file: any.component.ts */

import { EmojiPickerOptions } from 'angular2-emoji-picker';

constructor(private emojiPickerOptions: EmojiPickerOptions, private _el: ElementRef) {
  const emojiEvent : EmojiEvent = { ... };
  const emojiElement = this.emojiPickerOptions.getEmojiElement(emojiEvent);

  this._el.nativeElement.appendChild(emojiElement);
}

Directive API:

<i
    (click)="toggled = !toggled"
    [(emojiPickerIf)]="toggled"
    [emojiPickerDirection]="'bottom' || 'top' || 'left' || 'right'"
    [emojiPickerPreserveSelection]="true || false"
    [emojiPickerAutofocus]="true || false"
    (emojiPickerSelect)="handleSelection($event)">😄</i>

Emitter (emojiPickerSelect)="handleSelection($event)"

$event = EmojiEvent{ char : "😌", label : "relieved" }

EmojiPickerCaretEmitter

added for your convenience, emits information regarding a contenteditable enabled element

Emitter (emojiPickerCaretEmitter)="handleCaretChange($event)"

$event = CaretEvent{ caretOffset: 13, caretRange: Range{...}, textContent: 'content of div or input' }

Emoji Picker will get placed relative the element chosen via the directive api, centered and within window borders

Build

• npm run build:library