ng2-emojify
v2.0.7
An angular 2 module to support built-in and custom emoji
0/weekUpdated 3 years agoMIT
Published by Saurav Singh
npm install ng2-emojifyThis is an angular 2 module to support built-in and custom emoji in an angular 2 project.
You can see Live Demo application, or run on local system
$3
* Angular-cli: 1.0.0-beta.18 or higher
* NPM : 4.0.2 or higher
* Node: v6.9.1 or higher
$3
``
sh
npm install ng2-emojify --save
or
yarn add ng2-emojify --save
`
$3
Developers can use this module in angular 2 projects for built-in or custom emoji or both.
Steps to use :
##### Put
folder into the assets folder
Goto the node_modules/ng2-emojify/emoji in your Angualr 2 Project and Copy/Cut the emoji folder from there and
paste this emoji folder to your assets folder inside your Angular 2 project.##### Add
Ng2EmojifyModule to the module in which your component is declared like this.`js
import {Ng2EmojifyModule} from 'ng2-emojify';@NgModule({
...
imports: [
Ng2EmojifyModule // like it.
],
...
})
export class AppModule {
}
`
##### Add the following css to your component file.
`css
:host >>> .emogi-image {
height: 60px;
width: 60px;
border-radius: 50%;
}`
You can customize this css according to your need.##### Add
pipe to message in your component template. Like it ...`html
`
Here is any message like - I'm so happy today. :happy:. In this message :happy:
is an emoji identity. It will be converted to an image tag after passing through pipe.
#### To use custom emoji##### Add
CustomEmotion service to your component .ts file. `js
import {CustomEmotion} from 'ng2-emojify';...
constructor(private customEmotion: CustomEmotion) {
/ Mandatory to keep in constructor /
/
* @ CustomEmotion
*
emojiId - This is the id which will be used to convert into emoji.
* emojiUrl - This is the path to that image/gif which is to be used as emoji.
* title - This is the title to be shown as tooltip.
*/
this.customEmotion.AddCustomEmotions([
{
emojiId: 'myemojiId',
emojiUrl: 'assets/emoji/my-emoji.jpg',
title: 'My Emoji'
}
]);
}
...
`
Here is path to the image which is to be used as emoji. An emoji file may be .jpg, .png and
.gif file. assets/emoji/ is default path used by this module. However, you are free to give any full path
to your emoji file.
Now if you message like this- this is my custom emoji. :myemojiId:. :myemojiId: will be converted into your
custom emoji image.######
IMPORTANT: Please note if you use "emojiId" that is reserved for the built-in emoji. It will override the built-in$3
There is a tradition to use menu to select an emoji to send as message. Like in
, Twitter, WatsApp
and and so on. ng2-emojify has a built-in support for the same. To use built-in menu support do this...##### Add
Emotion service to your component .ts file
`js
import {CustomEmotion, Emotion} from 'ng2-emojify';...
constructor(private customEmotion: CustomEmotion, private emotion: Emotion) {
/ Mandatory to keep in constructor /
/
* @ CustomEmotion
*
emojiId - This is the id which will be used to convert into emoji.
* emojiUrl - This is the path to that image/gif which is to be used as emoji.
* title - This is the title to be shown as tooltip.
*/
this.customEmotion.AddCustomEmotions([
{
emojiId: 'myemojiId',
emojiUrl: 'assets/emoji/my-emoji.jpg',
title: 'My Emoji'
}
]);
/ *
* @ Emotion
*
emojiIdentity - This is the simple string like :happy: or :smile: of the
emoji that has been clicked in the emoji menu.
*/
this.emotion.CaptureEmojiClick().subscribe((emojiIdentity: string) => {
// write your logic here
});
}
...
`
You can write your own logic in to add this emojiIdentity to your message string to send directly it in message like in Facebook when emoji is clicked by user. You can write your code to add emoji to your input or textarea like Skype and then can send in message all at once.##### Add
[emotion-menu] directive and component to your component .template.
`html
`
Here, when is clicked it will display emoji menu with built-in and custom emojis. when an emoji is clicked,
its id (emojiIdentity) can be listen in CaptureEmojiClick() in your component constructor. When you click outside
emoji menu, it gets closed.######
IMPORTANT: Please give a unique id to the HTML element on which you have added the [emotion-menu] directive##### To customize emoji-menu css
There are three main HTML tags that constitutes the emoji-menu, two of them are
and one . You can write your
custom css for all of these. There is one main div that contains whole menu. second div contains the image and third is itself image. To write css for all of these, Youcan write as...####### make a separate file with extension
.ts to contain css
You can name it whatever you like. such as custom-emoji-menu-css.ts. It may be surprising to you but soon it will be clear to you later. Now write your css like this in your .ts file.
`js
/ **
* custom css declarations
* /
export const emotionCss = {
customEmotionMenuCss: {
position: 'fixed',
'border-radius': '10px 10px 10px 0px',
width: 520 + 'px',
height: 200 + 'px',
'background-color': 'lightblue',
border: '1px solid blue',
'z-index': 1,
'overflow-x': 'hidden'
},
customEmotionContainerCss: {
float: 'left',
width: 80 + 'px',
height: 80 + 'px',
margin: '15px'
},
customEmotionImageCss: {
width: '100%',
height: '100%',
margin: '0px',
'border-radius': '50%'
}
};
`
Here is css for main div that holds the emojis, customEmotionContainerCss is css for the second div inside the main div and customEmotionImageCss is css for the emoji image (img tag) it self.Now, you have written your custom css. import it in the main component
.ts file and use like this...`js
import {CustomEmotion, Emotion} from 'ng2-emojify';
import {emotionCss} from './custom-emoji-menu-css.ts';...
customEmotionCss: any;
constructor(private customEmotion: CustomEmotion, private emotion: Emotion) {
/ initialize the customEmotionCss value /
this.customEmotionCss = emotionCss; // <---------------- like this.
/
* @ CustomEmotion
*
emojiId - This is the id which will be used to convert into emoji.
* emojiUrl - This is the path to that image/gif which is to be used as emoji.
* title - This is the title to be shown as tooltip.
*/
this.customEmotion.AddCustomEmotions([
{
emojiId: 'myemojiId',
emojiUrl: 'assets/emoji/my-emoji.jpg',
title: 'My Emoji'
}
]);
/ *
* @ Emotion
*
emojiIdentity - This is the simple string like :happy: or :smile: of the
emoji that has been clicked in the emoji menu.
*/
this.emotion.CaptureEmojiClick().subscribe((emojiIdentity: string) => {
// write your logic here
});
}
...
`Now you have to provide css to the
directive in your template file as here...
`html
`
$3
This is all about this module.###### Report issues here
###### Feel free to sent your comments, queries and suggestions at