https://github.com/ahkohd/ngx-emoji-picker
😎 Just add water emoji-picker for Angular 2+ & Ionic 3+
https://github.com/ahkohd/ngx-emoji-picker
angular emoji-picker hacktoberfest ng9
Last synced: 7 months ago
JSON representation
😎 Just add water emoji-picker for Angular 2+ & Ionic 3+
- Host: GitHub
- URL: https://github.com/ahkohd/ngx-emoji-picker
- Owner: ahkohd
- Created: 2018-12-19T03:49:18.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2025-03-12T19:40:44.000Z (7 months ago)
- Last Synced: 2025-03-19T20:48:17.808Z (7 months ago)
- Topics: angular, emoji-picker, hacktoberfest, ng9
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/ngx-emoji-picker
- Size: 793 KB
- Stars: 21
- Watchers: 1
- Forks: 10
- Open Issues: 41
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
[](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)):
Victor Aremu
🚧 📆
Rubén
💻
cheygo
️️️️♿️
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!