Notoriously Pedantic Magistrate

    ngx-emoji-picker
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.6 • Public • Published

    npm version

    All Contributors

    😎 Ngx-emoji-picker

    🆕 What's New

    • 🐣 Fallback emojis using twemoji.
    • 🛠 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 Ng9 project.
    • ⏫ Upgraded the library RxJs from v5 to v6 to make it support new angular versions.
    • ✅ Now compatible with Ng2 - Ng9+ projects and as well as Ionic 3/4.

    A fork of ionic3-emoji-picker project created by danielehrhardt

    Installation

    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 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
    >
    toggledboolean = 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>
    toggledboolean = false;
    messagestring;
     
    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 content editable 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

    Related

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

    Contributing

    See CONTRIBUTING.md

    Contributors ✨

    Thanks goes to these wonderful people (emoji key):


    Victor Aremu

    🚧 📆

    Rubén

    💻

    cheygo

    ️️️️♿️

    This project follows the all-contributors specification. Contributions of any kind welcome!

    Install

    npm i ngx-emoji-picker

    DownloadsWeekly Downloads

    970

    Version

    0.1.6

    License

    MIT

    Unpacked Size

    1.34 MB

    Total Files

    71

    Last publish

    Collaborators

    • ahkohd