ngx-easy-emoji-picker

An Angular library to easily pick and use emojis in your application.

Description

This library provides a user-friendly emoji picker component that you can integrate into your Angular applications. It includes a comprehensive set of emojis that you can use for various purposes, such as in chat applications, comment sections, and more.

Versions

Version	Option
0.0.11	Contains local emoji file.
^0.0.12	Works with google cloud cdn.
^0.0.14	Works with signals.

Installation

npm install ngx-easy-emoji-picker

Usage

Mandatory module import HttpClientModule

1. Import

app.module.ts

import { EmojiPicker } from "ngx-easy-emoji-picker";
import { HttpClientModule } from "@angular/common/http";

@NgModule({
  imports: [EmojiPicker, HttpClientModule],
})
export class AppModule {}

For new version of angular

app.config.ts

import { ApplicationConfig, provideZoneChangeDetection } from "@angular/core";
import { provideRouter } from "@angular/router";
import { routes } from "./app.routes";
import { provideHttpClient } from "@angular/common/http";

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideHttpClient(),
  ],
};

2. Use it in your template

<emoji-picker
  (selectedEmoji)="onEmojiSelected($event)"
  width="230px"
  height="350px"
  [showCategories]="true"
  selectedCategory="smileys and people"
  categoriesPosition="bottom"
>
</emoji-picker>

Options

| Option              | Type      | Mandatory     | Description                                                                                                   |
| ------------------- | --------- | ------------- | ------------------------------------------------------------------------------------------------------------- |
| height              | number    | false         | The height of the container holding the emojis in pixels. If not specified, a default height will be used.    |
| width               | number    | false         | The width of the container holding the emojis in pixels. If not specified, a default width will be used.      |
| showCategories      | boolean   | false         | Determines whether to display emoji categories. Set to `true` to show categories, `false` to hide them.       |
| selectedCategory    | string    | false         | The currently selected emoji category. This value is used to filter and display emojis accordingly.           |
| categoriesPosition  | string    | false         | Specifies the position of the emoji categories within the component (e.g., 'top', 'bottom', 'left', 'right'). |
| selectedEmoji       | OutputEmitterRef<string>  | Emitted when an emoji is selected. Payload is the emoji's Unicode character.                                  |

Categories

    ["smileys and people", "food and drink", "activities", "travel and places", "objects",  "symbols", "flags"]

Example

app.component.ts

import { Component } from "@angular/core";
import { RouterOutlet } from "@angular/router";
import { EmojiPicker } from "ngx-easy-emoji-picker";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [RouterOutlet, EmojiPicker],
  templateUrl: "./app.component.html",
  styleUrl: "./app.component.css",
})
export class AppComponent {
  title = "my-project";

  selectedEmoji = "";

  onEmojiSelected(emoji: string) {
    this.selectedEmoji = emoji;
  }
}

app.component.html

<emoji-picker
  (selectedEmoji)="onEmojiSelected($event)"
  width="230px"
  height="350px"
  [showCategories]="true"
  selectedCategory="smileys and people"
  categoriesPosition="bottom"
>
</emoji-picker>

<span [innerHTML]="selectedEmoji"></span>

Emoji Data Source

The emoji data used in this library is sourced from the EmojiHub project by cheatsnake. EmojiHub is an open-source project that provides a large collection of emojis categorized for easy access.

You can visit the EmojiHub GitHub repository for more information: https://github.com/cheatsnake/emojihub