ngx-emoj

A simple, theme-able emoji mart/picker for angular 4+

Demo

Theme Creator

Also see a demo at the project's home page. You can use the theme creator to style up a new theme.

Features

• No use of external dependencies, implemented with Angular APIs.
• Fully themeable with ease.
• A light-weight library, does not load any stylesheets or images.
• Uses Unicode emoji chars, which makes emoji look and feels native.
• Flexible Interfaces to theme the looks of the emoji mart.
• Mobile ready, supports touch interactions, like swipe.
• You can easily create themes with the theme creator at the project's home page
• Persistently saves recently used emojis using window.localStorage
• Works with Ng2 to Ng7 projects and as well as Ionic 3/4.

Install

Install the module via NPM

npm i ngx-emoj --save

Import it in your app's module(s)

Import EmojiPickerModule.forRoot() in your app's main module

app.module.ts

import  {  NgxEmojModule  }  from  'ngx-emoj';
 
@NgModule({
    ...
    imports: [
      ...
      NgxEmojModule
      ],
    ...
})
export class AppModule {}

Sample

A simple example of ngx-emoj in action

<div>
    <h1>Pick an Emoji: {{ text }}</h1>
    <ngx-emoj
        (onemojipick)="handleEmoji($event)"
        (onchardelete)="handleCharDelete($event)"
        [width]="'35vw'"
        [height]="'50vh'">
    </ngx-emoj>
</div>

text:  string  =  '';
 
handleEmoji(e)  {
    this.text +=  e.char;
    console.log('Emoji Name',  e.name);
}
 
handleCharDelete(e)  {
    if (this.text.length >  0) {
        this.text =  this.text.substr(0,  this.text.length -  2);
    }
}

Directive API:

<ngx-emoj
        (onemojipick)="handleEmoji($event)"
        (onchardelete)="handleCharDelete($event)"
        [width]="'String. unit in css, i.e 30vh, 150px, 50% Required!'"
        [height]="'String. unit in css, i.e 30vh, 150px, 50% Required!'"
        [theme]="{ ...Implements Theme Interface... }"
        [maxRecentEmoji]="Number"
        [recentEmojiStoreKey]="'String'"
        [searchEmojiPlaceholderText]="'String'"
        [emojiNotFoundText]="'String'">
</ngx-emoj>

• [height] : The height of the emoji picker (required!)
• [width] : The width of the pre-loaded image. (required!)
• [maxRecentEmoji] : (Integer) of emojis to save as recently used emojis. (optional), default set to 36 emojis.
• [recentEmojiStoreKey] : (String) The name of the key to store the recent emojis in the window.localStorage (optional) default set to 'ngx-emoji-picker-recent-emo-store'
• [searchEmojiPlaceholderText]: (String) Use to set custom emoji picker search box placeholder text. (Optional) default set to 'Search'
• [emojiNotFoundText]: (String) Use to set custom emoji picker no search result text. (Optional) default set to 'No results ;)'
• [theme]: (Theme) Use to set custom theme/ change the overall appearace of the emoji picker. Also see the Theme Interface` for more info on how to theme. (optional) Default, Whatsapp EmojiPicker Theme.

Events

<ngx-emoj> component emits two events. Use this to

• (onemojipick): Emits when user picks an emoji. Emits EmojiEvent{ char : "😌", name: "relieved" }

    ....
   	 (onemojipick)="handleEmoji($event)"
   	...

    handleEmoji(e)  {
   	// invoked when picks a emoji...
   	this.text +=  e.char;
   	// get the picked emoji
   	console.log('Emoji Name',  e.name);
   }

• (onchardelete): Emits when user clicks on the delete character button on the emoji picker. Use this to delete the last character/emoji in your string.

   ....
  	 (onchardelete)="handleCharDelete($event)"
   ...

handleCharDelete(e)  {
   if (this.text.length >  0) {
   	this.text =  this.text.substr(0,  this.text.length -  2);
   }
}

Theming

ngx-emoj can be themed using [theme] and passing in an object implementing the Theme Interface. Also you can easily theme with the creator at the project's home page

<ngx-emoj
    ...
        [theme]="{...}"
    ... >
</ngx-emoj>

The theme interface

interface  Theme  {
    martFontFamily?:  string;						// Font family used by the emoji picker.	
    martBG?:  string;								// Background color of the emoji picker.
    martShowHeader?:  boolean;						// If set to false, ngx-emoji will not show it's header.
    martHeaderBG?:  string;							// Background color of the mart header.
    martHeaderFG?:  string;							// Text color of the emoji picker header.
    martActiveCategoryIndicatorColor?:  string;		// Color of the  Icon of the active emoji category.
    martActiveCategoryIndicatorHeight?:  string;	// Border Color of the active emoji category indicator.
    martHeaderFontSize?:  string;					// Font size of the emoji picker header.
    martHeaderPadding?:  {x:  string,  y:  string}; // Padding of the emoji picker header, NOTE: once set, both 'x' and 'y' must be defined.
    martCategoryFG?:  string;						// Text color at the emoji picker category.
    martIconsFG?:  string;							// Color of the icons that marks a category at the emoji picker header.
    martWidth?:  string;							// Emoji picker width.
    martHeight?:  string;							// Emoji picker height.
    martBorderRadius?:  string;						// Border radius of the emoji picker.
    martEmojiFontSize?:  string;					// Overall font size of the emoji picker.
    martEmojiPadding?:  {x:  string;  y:  string};	// Overall padding of the emoji. NOTE: Once set, 'x' and 'y' values must be defined.
    martCategoryFontSize?:  string;					// Font size of the emoji picker category.
    martCategoryColor?:  string;					// Emoji picker category section text color.
    martCategoryColorActive?:  string;				// Emoji picker active category section color.
    martFooterFG?:  string;							// Emoji picker footer text color.
    martFooterBG?:  string;							//	Emoji picker footer background color.
    martFooterFontSize?:  string;					// Emoji picker footer font size.
    martFooterPadding?:  {x:  string,  y:  string}; // Padding of the emoji mart footer.
    martShowFooter?:  boolean;					    // If set to false, emoji picker footer will not be shown.
    martSearchBoxStyle?:  {							// Emoji picker search box style.
        FGcolor?:  string,
        BGcolor?:  string,
        borderColor?:  string,
        placeHolderColor?:  string,
        borderRadius?:  string
    };
}

Theme Example - Whatsapp Emoji picker theme (default)

<ngx-emoj
        (onemojipick)="handleEmoji($event)"
        (onchardelete)="handleCharDelete($event)"
        [width]="'35vh'"
        [height]="'50vh'"
        [theme]="{
            martShowHeader: true,
            martShowFooter: true,
            martHeaderPadding: {x: '0', y: '0'},
            martFooterPadding: {x: '0', y: '0'},
            martHeaderFontSize: '14px',
            martHeaderBG: '#e3e7e8',
            martFooterBG: '#e3e7e8',
            martBG: '#ebeff2',
            martCategoryColor: '#94a0a6',
            martCategoryColorActive: '#455a64',
            martActiveCategoryIndicatorColor: '#00897b',
            martEmojiFontSize: '150%',
            martCategoryFontSize: '20px',
            martBorderRadius: '5px',
            martActiveCategoryIndicatorHeight: '4px',
            martEmojiPadding: {x: '40px', y: '40px'}
        }"
        [maxRecentEmoji]="Number"
        [recentEmojiStoreKey]="'String'"
        [searchEmojiPlaceholderText]="'String'"
        [emojiNotFoundText]="'String'">
</ngx-emoj>

Todo

• Add gif support using GIPHY API.
• Add stickers support.
• Target for Webcomponent for use with other front-end frameworks and PWAs.

Contributing

• Your commits conform to the conventions established here