2.0.0 • Published 2 years ago
@eff-custom-plugins/emoji-picker v2.0.0
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/"
}
..
]