CODEWITHSUNDEEP
angularangular2-template
Amir Sasani
Amir Sasani

Reputation: 327

angular 2 input with image support

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?

Upvotes: 0

Views: 507

Answers (1)

Amir Sasani
Amir Sasani

Reputation: 327

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>

Upvotes: 1

Related Questions