EmojiPicker

This library was generated with Angular CLI version 14.0.5.

See live demo here.

This library will help you to use Unicode emojis. There are 8 categories with 1523 emojis.

Attributes

Attributes	Description
@Input() element: any	You should send your input / textarea element via `element`, so library can detect actions from input / textarea (like cursor change)
@Input() emojiPickerOptions: IEmojiPickerOptions	You can add options like btnIcon searchIcon customClass emojisPerRow emojiPickerPosition defaultCatalogId * All are optional
@Output() selectEmojiEvent: EventEmitter< string >()	Event will be fired when emoji selected and will return input value and selected emoji `IInputValue {value: string; selectedEmoji: string;}`

Example and Sample Code

Import 'EmojiPickerModule' in your app module

import { EmojiPickerModule } from "emoji-picker";
  
@NgModule({
  imports:[
    ..
    EmojiPickerModule
    ..
  ]
})

Add 'emoji-picker' in your component html

<input #emojiInput type="text">
<emoji-picker   [emojiPickerOptions]="emojiPickerOptions"
                (selectEmojiEvent)="selectEmoji($event)"
                [element]="emojiInput"></emoji-picker>

Add a method in your component class to listen for selectEmojiEvent event

selectEmoji(inputValue: IInputValue): void {
  console.log('Input value - ' + inputValue.value);
  console.log('Selected emoji - ' + inputValue.selectedEmoji);
}

Add styles and assets folder in your angular.json

"styles": [
  ..
  "node_modules/@eff-custom-plugins/emoji-picker/lib/assets/sass/emoji-picker.scss"
  ..
]

AND

"assets": [
  ..
  {
    "glob": "**/*",
    "input": "node_modules/@eff-custom-plugins/emoji-picker/lib/assets",
    "output": "/assets/"
  }
  ..
]