angular 2 input with image support

Question

I want to create a chat app with angular 2 and I need to show Emojis in the input field, but html doesn't support image in input field.
also I tried this way, but not worked:

<div contenteditable="true"
     [innerHtml]="msgText"
     class="form-control"
     (keyup)="enable_disable_sendBtn()"
     (keypress)="handle_enter_key($event)"
     #messageBox
     (input)="msgText = $event.target.innerText">
</div>

I have tried this but not I've got errors from tslint and says: use @HostListener Or @HostBinding instead of host.
Can anyone help me to show emjis in the text input?

"but not worked" is not enough information. What is the expected behavior? What is the actual behavior? Any error messages? — Günter Zöchbauer, Sep 04 '17 at 15:11
Perhaps you want to use https://www.emojione.com/ or similar — Günter Zöchbauer, Sep 04 '17 at 15:13
@GünterZöchbauer I expect to show images and it shows but the problem is when I try to write `amir` it writes `rima` so the problem is whenever a key is pressed (or keyup or keydown, I don't know what the problem is) the caret goes to the first of input — Amir Sasani, Sep 05 '17 at 03:40

score 1 · Accepted Answer · answered Sep 11 '17 at 04:32

Finally I find a solution. the solution is one way binding, cause the user writes something in the contenteditable and I just need to get the innerHTML when I want e.g.: when to send the content.
also when I want to add an Image to the content, simply I add to the contenteditable and when I need to send (or something like) I get the innerHTML .

<div contenteditable="true"
   class="form-control"
   id="messageBox"
   #messageBox
   (keydown.enter)="handle_enter_key($event)"
   (input)="handleMessageBoxInput($event)">
</div>

angular 2 input with image support

1 Answers1