I have a small concern for displaying emoji in ionic 3.
I created my chat application where I use emoji, but when I send an emoji it sends an empty message to the reception of the latter.
So, how can I send an emoji? Or, how to convert emoji to unicode plain text?
Thank you guys, I’m waiting for your feedback!
Here are some codes:
Message.ts
import { Component, ElementRef } from '@angular/core';
import { EmojiPickerItem } from './../../model/emoji-picker/emoji-picker.interface';
.......
export class MessagePage {
selectedImojiPickerIten: EmojiPickerItem;
showEmojiPicker = false;
editorMsg = "";
constructor(navParams: NavParams,....){}
switchEmojiPicker() {
this.showEmojiPicker = !this.showEmojiPicker;
if (!this.showEmojiPicker) {
// this.messageInput.setFocus();
}
this.content.resize();
this.scrollToBottom();
}
emoji(event) {
this.selectedImojiPickerIten = event;
this.editorMsg += this.selectedImojiPickerIten.emoji
}
Message.html
<ion-footer [style.height]="showEmojiPicker ? '255px' : '55px'">
<ion-grid class="input-wrap">
<ion-row>
<ion-col col-2>
<button ion-button clear icon-only item-right (click)="switchEmojiPicker()">
<ion-icon name="md-happy"></ion-icon>
</button>
</ion-col>
<ion-col col-8>
<ion-textarea #chat_input [(ngModel)]="editorMsg" #chat_input placeholder="Message" (keyup.enter)="sendMsg()" (ionFocus)="onFocus()"
(ionChange)="isTyping()">
</ion-textarea>
</ion-col>
<ion-col col-2>
<button ion-button clear icon-only item-right class="'message-editor-button' + message.ownership" (click)="sendMsg()">
<ion-icon name="ios-send" ios="ios-send" md="md-send"></ion-icon>
</button>
</ion-col>
</ion-row>
</ion-grid>
<emoji-picker (selectedImojiPickerIten)="emoji($event)" *ngIf="showEmojiPicker" [(ngModel)]="editorMsg"></emoji-picker>
</ion-footer>
I have a JSON file where there is unicode emoji, but when sending it goes empty. Even when you send me an emoji message, it happens empty
Here is my JSON file where there is the emoji list:
[
{
"emoji": "\ud83d\ude04",
"description": "smiling face with open mouth and smiling eyes"
},
{
"emoji": "\ud83d\ude03",
"description": "smiling face with open mouth"
},
{
"emoji": "\ud83d\ude00",
"description": "grinning face"
},
{
"emoji": "\ud83d\ude0a",
"description": "smiling face with smiling eyes"
},
{
"emoji": "\u263a\ufe0f",
"description": "white smiling face"
},
{
"emoji": "\ud83d\ude09",
"description": "winking face"
},
{
"emoji": "\ud83d\ude0d",
"description": "smiling face with heart-shaped eyes"
},
{
"emoji": "\ud83d\ude18",
"description": "face throwing a kiss"
},
{
"emoji": "\ud83d\ude1a",
"description": "kissing face with closed eyes"
},
{
"emoji": "\ud83d\ude17",
"description": "kissing face"
},
{
"emoji": "\ud83d\ude19",
"description": "kissing face with smiling eyes"
},
{
"emoji": "\ud83d\ude1c",
"description": "face with stuck-out tongue and winking eye"
}
{
..................................................
}
]
In these images, once sent the emoji, the message leaves empty.
Your help please!