[](https://badge.fury.io/js/ngx-emoji-picker)
[](#contributors-)
# 😎 Ngx-emoji-picker
## 🆕 What's New
- 🐣 Fallback emojis using twemoji.
- 🛠 Fixed the [AOT (Ahead Of Time) Compile error](https://github.com/danielehrhardt/ionic3-emoji-picker/issues/8) 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](https://github.com/danielehrhardt/ionic3-emoji-picker) project created by [danielehrhardt](https://github.com/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
### Angular Example
```html
😄
```
```ts
toggled: boolean = false;
handleSelection(event) {
console.log(event.char);
}
```
### Ionic 3 Example
```html
```
```ts
toggled: boolean = false;
message: string;
handleSelection(event) {
this.message += event.char;
}
```
### Directive API:
```html
```
### 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](https://github.com/ahkohd/ngx-emoj) - 💅 A simple, theme-able emoji mart/picker for angular 4+
# Contributing
See [CONTRIBUTING.md](./CONTRIBUTING.md)
## Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
