Howto: display emoji about ngx-emoji-mart HOT 5 CLOSED

@wilson0506

In your html:

<emoji-mart (emojiSelect)="addEmoji($event)"></emoji-mart>

And in your component:

public addEmoji(event: {$event: MouseEvent, emoji: EmojiData}) {
  let emoticonElement = <HTMLElement> event.$event.target;
  if (!emoticonElement.style.backgroundImage || emoticonElement.style.backgroundImage === '') {
    emoticonElement = <HTMLElement> emoticonElement.firstChild;
  }
  console.log(emoticonElement.outerHTML); 
  // -> will give you the emojis html, which you can use for [innerHTML] etc.
}

Note that you will only need this if you're using some none-angular component or into a contenteditable. Otherwise you can just use <ngx-emoji [emoji]="emojiEventReturnedByPicker.emoji.id"></ngx-emoji> and then wrap this in a *ngIf or a *ngFor - whatever you need.

from ngx-emoji-mart.

add (emojiClick)="addEmoji($event)" event to your html binding.

and then in your add emoji function.
(HTMLInputElement).value += event.emoji.native

I think it's already listed in the README.md file

from ngx-emoji-mart.

Sorry for bothering, if use emoji native like 😍,
it will show up accordingly to the platform, like iphone showing apple version.

How to apply theme to it, let say if i want to change to twitter version, what should i do?

one more question, is it possible to convert html into
<ngx-emoji=':smiley" size="16"> by regex
and display it using [innerHtml] or sth like that .

Cheers

from ngx-emoji-mart.

innerHTML doesn't render angular components....

from ngx-emoji-mart.

should be easier with the new function added to emoji service https://github.com/TypeCtrl/ngx-emoji-mart#display-emoji-as-custom-element

closing in favor of #89

from ngx-emoji-mart.