how to use emoji picker lib in angularjs with directive?

Question

I get this emoji lib :

https://github.com/one-signal/emoji-picker

I've thinking about make a directive, this is the function to use the emoji picker:

$(function() {
  // Initializes and creates emoji set from sprite sheet
  window.emojiPicker = new EmojiPicker({
    emojiable_selector: '[data-emojiable=true]',
    assetsPath: 'lib/img/',
    popupButtonClasses: 'fa fa-smile-o'
  });
  // Finds all elements with `emojiable_selector` and converts them to rich emoji input fields
  // You may want to delay this step if you have dynamically created input fields that appear later in the loading process
  // It can be called as many times as necessary; previously converted input fields will not be converted again
  window.emojiPicker.discover();
});

and this is the htlm use of the emoji:

  <p class="lead emoji-picker-container">
    <textarea class="form-control textarea-control" rows="3" placeholder="Textarea with emoji Unicode input" data-emojiable="true" data-emoji-input="unicode"></textarea>
  </p>

how could I do this for my angular project? thanks for helping me!

Answer 1

ng-emoji-picker is an angular directive for https://github.com/OneSignal/emoji-picker

It removes the wysiwyg editor that Original Emoji Picker uses which converts your input/text area to a div and instead it just adds the emoji picker icon on the current textbox or input and uses unicode to add emojis

Answer 2

In case anyone is looking for an emoji selector for Angular 2, I found this very useful jQuery plugin after two days of search: EmojiOne Area

If you want to call is to declare a global variable in your component (where you want to use it) like this declare const jQuery: any and then make sure to use it in ngAfterViewInit() . ngAfterViewInit() will make sure that your DOM is ready, otherwise you'll get an error saying that emojioneArea is not a function.

Use it like this by selecting your input element by its id or class:
jQuery(".your-input-selector").emojioneArea();

Answer 3

you can also use this for EmojiOne Area with angular

// Document ready
angular.element(document).ready(function () {
}

The only issue I have is that when use it with a textarea within a <md-input-container> , it messes up the behaviour and the link with my model seams to be broken. Also the picker shows up under my other elements. I didnt try the ng-emoji-picker yet.

Answer 4

Emoji-picker works fine with angular easy to use as well.

with webpack import the lib

import 'angular-emoji-picker-extended/dist/js/emoji-picker';

in the view

<span container-id="txtPostMessage"  emoji-picker="post.message" output-format="unicode" placement="right-relative" title="Emoji"></span>

Make sure you initialise your model in the controller and voila !