How To Add Emojis In Angular

Nowadays, We all are using smilies and different emojis to express our feelings. In angular you can easily use emojis using following article.

Step 1 :

At first you need to install the following dependency:

npm i ngx-emoji-picker

Step 2 :

In second step open app.module.ts file and follow below code :

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

  imports: [
  declarations: [
  bootstrap: [AppComponent]
export class AppModule { }

Step 3 :

In this step open app.component.ts file and follow below code :

import { Component } from '@angular/core'

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']

export class AppComponent {

  toggled: boolean = false;
  message: string = '';
  alltext: any

  handleSelection(event: any) {
    this.message += event.char;

  send() {
    this.alltext = this.message

Step 4 :

In this step open app.component.html file and follow below code :

<main class="w-50 mt-5 m-auto">
  <h4>How To Add Emojis In Angular</h4>
  <div class="d-flex">
    <div class="colinput">
      <input [(ngModel)]="message" class="border-0" [ngModelOptions]="{standalone: true}" type="text" placeholder="Write your message..." />
      <i class='attachment' (click)="toggled = !toggled" [(emojiPickerIf)]="toggled" [emojiPickerDirection]="'top'"
    <button class="submit btn btn-primary ms-2" (click)="send()">Send</button>
  <div class="mt-3">Message -> {{ alltext }}</div>

Step 5 :

In second step open app.component.css file and follow below code :

  width: fit-content;
  border: 1px solid #bbb8b8;

.colinput input, .attachment{
  padding: 10px;

.colinput input:focus-visible{
  outline: none;

Step 6 :

run your project using command npm start 

Output :

Submit a Comment

Your email address will not be published. Required fields are marked *


Select Categories