ngx-emoji-picker

Install the module via NPM

# Angular 8 downwards...
npm i ngx-emoji-picker@0.0.2

# Angular 9 upwards...
npm i ngx-emoji-picker twemoji

Import it in your app's module(s)

import  {  NgxEmojiPickerModule  }  from  'ngx-emoji-picker';

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

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

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

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

• ngx-emoj - 💅 A simple, theme-able emoji mart/picker for angular 4+