@wizdm/emoji

Emoji Support

Universal emoji support for Angular. The package provides utilities and components rendering emoji as images whenever the native support were missing.

Installation

Import the EmojiSupport module in your root module calling the static init() function to setup the source path for the image files:

import { EmojiSupportModule } from '@wizdm/emoji';

@NgModule({
  imports: [
    ...
    EmojiSupportModule.init( { 
      emojiPath: "https://cdn.jsdelivr.net/npm/emoji-datasource-google@5.0.1/img/google/64/" 
    })
  ]
  bootstrap: [AppComponent]
})
export class AppModule { }

The package is designed to work with images following emoji-datasource naming convention.

Usage Example

The package can be used to both render text or to capture input with emoji:

  <!-- Displays a text with emoji --> 
  <h1 wm-emoji-text="Send a message 😉"></h1>
  
  ...
  
  <!-- Emoji Input within a Material Form -->
  <mat-form-field>
    <mat-label>Emoji Input</mat-label>
    <wm-emoji-input matEmoji [(formControl)]="text" name="text"></wm-emoji-input>
    <mat-hint>Material Form Field applied to universal Emoji Input</mat-hint>
  </mat-form-field>
  
  ...
  

Use the <wm-emoji-text> component to render texts. If native support is available, the component simply renders the text as it is. In case of native support missing, the component renders the text using <img/> elements to render the emoji.

Use the <wm-emoji-input> the same way you'd use a textarea control. The component implements the ControlValueAccessor interface supporting the Angular's form API.

Use the matEmoji directive to enable the component working within a MatFormField.