ngx-emoji-picker-lagily

Ngx-Emoji-Picker

This project was forked from the ionic3-emoji-picker project created by danielehrhardt

What's New

• Fixed the AOT (Ahead Of Time) Compile error or simply put the ---prod build compile error.
• Upgraded the library from a Ng2 project to a Ng7 project.
• Upgraded the library RxJs from v5 to v6 to make it support new angular versions.
• Now compatible with Ng2 - Ng7 projects and as well as Ionic 3/4.

Installation

Install the module via NPM

npm i ngx-emoji-picker --save

Import it in your app's module(s)

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

app.module.ts

import  {  NgxEmojiPickerModule  }  from  'ngx-emoji-picker';
 
@NgModule({
    ...
    imports: [
      ...
      NgxEmojiPickerModule.forRoot()
      ],
    ...
})
export class AppModule {}

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

import  {  NgxEmojiPickerModule  }  from  'ngx-emoji-picker';
 
@NgModule({
    ...
    imports: [
      ...
      NgxEmojiPickerModule
      ],
    ...
})
export class SharedModule {}

Sample

Angular Example

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

toggled: boolean = false;
handleSelection(event) {
  console.log(event.char);
}

Ionic 3 Example

<ion-textarea [(ngModel)]="message"></ion-textarea>
 
<button ion-button clear icon-only (click)="toggled = !toggled" [(emojiPickerIf)]="toggled" [emojiPickerDirection]="'top'"
  (emojiPickerSelect)="handleSelection($event)">
  <ion-icon name="md-happy"></ion-icon>
</button>

toggled: boolean = false;
message: string;
 
handleSelection(event) {
  this.message += event.char;
}

Directive API:

<button ion-button
    (click)="toggled = !toggled"
    [(emojiPickerIf)]="toggled"
    [emojiPickerDirection]="'bottom' || 'top' || 'left' || 'right'"
    (emojiPickerSelect)="handleSelection($event)">
      <ion-icon name="md-happy"></ion-icon>
    </button>

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