# EmojiPicker

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.0.5.

See live demo <a href="https://adavtyan13.github.io/emoji-picker-angular8/">here</a>.

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

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

### Example and Sample Code
1) **Import _'EmojiPickerModule'_ in your app module**
```ts
import { EmojiPickerModule } from "emoji-picker";
  
@NgModule({
  imports:[
    ..
    EmojiPickerModule
    ..
  ]
})
``` 

2) **Add _'emoji-picker'_ in your component html**
```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**
```ts
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**

```json
"styles": [
  ..
  "node_modules/@eff-custom-plugins/emoji-picker/lib/assets/sass/emoji-picker.scss"
  ..
]
```
AND
```json
"assets": [
  ..
  {
    "glob": "**/*",
    "input": "node_modules/@eff-custom-plugins/emoji-picker/lib/assets",
    "output": "/assets/"
  }
  ..
]
```