😎 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

``shell


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

`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:

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

@NgModule({
...
imports: [
...
NgxEmojiPickerModule
],
...
})
export class SharedModule {}
`

Sample

$3

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

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

$3

`html


ion-button
clear
icon-only
(click)="toggled = !toggled"
[(emojiPickerIf)]="toggled"
[emojiPickerDirection]="'top'"
(emojiPickerSelect)="handleSelection($event)"
>


`

`ts
toggled: boolean = false;
message: string;

handleSelection(event) {
this.message += event.char;
}
`

$3

`html
ion-button
(click)="toggled = !toggled"
[(emojiPickerIf)]="toggled"
[emojiPickerDirection]="'bottom' || 'top' || 'left' || 'right'"
(emojiPickerSelect)="handleSelection($event)"
>


`

$3

`
$event = EmojiEvent{ char : "😌", label : "relieved" }
`

EmojiPickerCaretEmitter

added for your convenience, emits information regarding a content editable enabled element

$3

`
$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!