How to use emoji in angular application?

Photo by Domingo Alvarez E on Unsplash

When you develop a chat application or a customized comment section in your application then you definitely think of including emoji with your input.

Let’s learn how to include emoji in angular application.

We’ll be using one npm package ‘@ctrl/ngx-emoji-mart’ to include emoji with input text.

Let’s quickly create one angular application and install this package.

ng new angular-emoji

npm install @ctrl/ngx-emoji-mart

You can refer this to get correct version for your angular app.

Open app.module.ts and import PickerModule

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { PickerModule } from '@ctrl/ngx-emoji-mart';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    PickerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Open styles.css and import picker like shown below

@import '~@ctrl/ngx-emoji-mart/picker';

Now we are ready to use emoji 😄in app.

Let’s go to app.component.html and paste the below html code

 <form action="">
  <ng-container>
    <input
      type="text"
      (focus)="onFocus()"
      placeholder="Type your messages..."
      [(ngModel)]="messageInput"
      name="messageInput"
      id="messageInput"
    />
    <button class="emoji-picker" (click)="toggleEmojiPicker()">😀</button>
    <br />
    <emoji-mart
      class="emoji-mart"
      set="google"
      *ngIf="showEmojiPicker"
      (emojiSelect)="addEmoji($event)"
      title="Pick your emoji…"
    ></emoji-mart>
  </ng-container>
</form>
<ng-container>
  {{ messageInput }}
</ng-container>

We are craeting an input box with a button to select emoji. We’ll see the “messageInput ” value live with the help of angular two way binding and interpolation.

Now let’s go to app.component.ts and paste the below code

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  messageInput = '';
  showEmojiPicker = false;
  toggleEmojiPicker() {
    this.showEmojiPicker = !this.showEmojiPicker;
  }
  addEmoji(event) {
    const text = `${this.messageInput}${event.emoji.native}`;
    this.messageInput = text;
  }
  onFocus() {
    this.showEmojiPicker = false;
  }
}

Let’s start our angular application with “ng serve” and play with input and emoji 😍.

Note: If you are trying this and facing any versioning issue and then please refer this page.

HAPPY LEARNING