How To Implement Emoji In Angular

What Is Emoji And Why We Need It?

“An emoji is a pictogram, logogram, ideogram, or smiley embedded in the text and used in electronic messages and web pages. The primary function of emoji is to fill in emotional cues otherwise missing from the typed conversation.” —Wikipedia.

An emoji is a visual representation of objects, symbols, and emotions. It helps to replace your words with graphical representation. Because of their rich emotional meaning, emoji is very useful for online conversation.

Now a day, people are using emojis for giving personality to the messages. In the modern era such as smartphones and other social media platforms like Facebook, Instagram, Snapchat, etc are using a large number of emojis in daily communications.

Get Started.

Step 1: Create a new Angular project.

ng new Emoji-Icon

We use here an Angular Material. If you want to learn about how to implement Angular Material to your project then click here.

Step 2: Install emoji-picker-element

Using CLI.

npm install emoji-picker-element

Using <script> tag.

<script type="module" src="https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/index.js"></script>

Step 3: Import the Picker in your app.component.ts

import { Component } from '@angular/core';
import { Picker } from 'emoji-picker-element';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  picker = new Picker();
  
  emojiInput: string = '';

  addEmoji(event: any) {
    this.emojiInput += event?.detail?.unicode;
  }

  emojiPreventClose($event: any) {
    $event.stopPropagation();
  }
}

Step 4: Define <emoji-picker> in your app.component.html

<div class="main-icon">
  <mat-form-field appearance="outline">
    <mat-label>Emoji Picker</mat-label>
    <input matInput [(ngModel)]="emojiInput">
    <mat-icon matSuffix [matMenuTriggerFor]="emojiIcon">sentiment_very_satisfied</mat-icon>
  </mat-form-field>
  <mat-menu #emojiIcon="matMenu" class="emoji-menu">
    <emoji-picker class="light" (emoji-click)="addEmoji($event)" (click)="emojiPreventClose($event);"></emoji-picker>
  </mat-menu>
</div>

Now, you have done all things. You can run the project and you will be able to use the emoji icons.

You can also give custom styles to your emoji.

Styling:

emoji-picker-element uses Shadow Dom. So you can style the emoji only from the global CSS Stylesheet.

Size:

emoji-picker-element has a default size. But you can change it whatever you want.

emoji-picker{
 width: 500px;
 height: 500px;
}

To expand the size of emoji in whatever container you give.

emoji-picker{
 width:100%;
 height:100%
}

Dark mode:

By default, the emoji picker has a light mode. But you can easily switch it into dark mode by prefers-color-scheme. Or you can also give class to forcibly switch modes.

<emoji-picker class="dark"></emoji-picker>

<emoji-picker class="light"></emoji-picker>

Conclusion:

Here we learn what is emoji, use and how to implement emoji in our Angular project. We also see that how to style the emoji-picker-element. Remember that emoji-picker-element uses Shadow DOM, so you need to style the main stylesheet. You can also switch dark and light modes.