@wizdm/emoji
v2.1.0
Published
Universal Emoji Support for Angular
Downloads
7
Readme
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/[email protected]/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.