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';

@NgModule({
  imports: [
    BrowserModule,
    NgxEmojiPickerModule.forRoot()
  ],
  declarations: [
    AppComponent, 
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 3 :

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

import { Component } from '@angular/core'

@Component({
  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'"
        (emojiPickerSelect)="handleSelection($event)">😄</i>
    </div>
    <button class="submit btn btn-primary ms-2" (click)="send()">Send</button>
  </div>
  <div class="mt-3">Message -> {{ alltext }}</div>
</main>

Step 5 :

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

.colinput{
  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 :