Emoji picker for Ionic3


2061.4.03 years ago4 years agoMinified + gzip package size for @ionic-tools/emoji-picker in KB


npm version

Emoji picker for Ionic 3

This project was forked from the angular2-emoji-picker project created by lsharir


Install the module via NPM

npm i @ionic-tools/emoji-picker --save

Import it in your app's module(s)

Import EmojiPickerModule.forRoot() in your app's main module


import { EmojiPickerModule } from '@ionic-tools/emoji-picker';

    imports: [
export class AppModule {}

If your app uses lazy loading, you need to import EmojiPickerModule in your shared module or child modules:

import { EmojiPickerModule } from '@ionic-tools/emoji-picker';

    imports: [
export class SharedModule {}


<ion-textarea [(ngModel)]="emojitext"></ion-textarea>

<button ion-button clear icon-only (click)="toggled = !toggled" [(emojiPickerIf)]="toggled" [emojiPickerDirection]="'top'"
toggled: boolean = false;
emojitext: string;

handleSelection(event) {
  this.emojitext = this.emojitext + " " + event.char;

Directive API:

<button ion-button
    (click)="toggled = !toggled"
    [emojiPickerDirection]="'bottom' || 'top' || 'left' || 'right'"

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

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


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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.