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 btnIconsearchIconcustomClassemojisPerRowemojiPickerPositiondefaultCatalogId * 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

1. Import 'EmojiPickerModule' in your app module

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

2. Add 'emoji-picker' in your component html

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

3. 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);
}

4. 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/"
  }
  ..
]