Add Emoji to your Angular application

Photo by Denis Cherkashin on Unsplash

Nowadays it is impossible to escape emojis. We are surrounded by smilies that express our feelings or have the sole purpose of shortening our sentences.

Whether you are laughing 😂 or that the message received leaves you scandalized 😱, you have been able to express these emotions by adding what we call emoticons.

For this reason then, in this article, we will go to see how to add these nice emoticons in our Angular project.

Preparing our environment

Creating projects, generating application and library code, performing tasks such as testing, building and deployment depends on Angular CLI.

To install the Angular CLI, open the terminal and run the following command:

npm install -g @angular/cli

At this point we create our workspace by running the following commands:

cd ~
ng new emoji-app

With the ng new command, you will be asked a series of questions depending on the version you have installed of the Angular CLI, which you can accept with the default values.

Typical questions you should answer:

  • Would you like to add Angular routing? Yes
  • Which stylesheet format would you like to use? SCSS

This can take a few minutes.

Hello World

The first thing we are going to do after creating the project is to certainly start it and see by default what is present in our workspace.

cd emoji-app
ng serve

At this point, open your browser and navigate to: http://localhost:4200/

As you can see, Angular’s CLI was kind enough to create a default page for us immediately displayed on the browser.

Necessary dependencies

To achieve our goal we will use the module: “ngx-emoji-mart”.

As a first step we are going to install the following dependency:

npm install @ctrl/ngx-emoji-mart --save

At this point under the “dependencies” property in package.json you should be able to see something very similar to this: @ctrl/ngx-emoji-mart: ^4.1.0 .

At this point, we add the reference to the new module inside our app.module.ts and FormsModule in order to correctly use all the angular directives

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { PickerModule } from '@ctrl/ngx-emoji-mart';@NgModule({
declarations: [
AppComponent
],
imports: [
PickerModule,
FormsModule,
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

and we import the CSS in the configuration file of our project angular.json under the field projects.emoji-app.architect.build.styles

..."styles": [
"src/styles.scss",
"node_modules/@ctrl/ngx-emoji-mart/picker.css"
]
...

Alternatively, you could also import the CSS in the src/styles.scss file as follows:

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

Let’s code template

Although during the generation a default template was created in the app.component.html, we clean the code from the automatically generated one and proceed to create a text-area with a button to add the icons.

We will display the compiled text immediately below our input.

Let’s create a title for our app.component.html page and a small paragraph below

<h1>Angular Emoji</h1>
<p>This is where the magic happens</p>

At this point, we add our text-area

<textarea placeholder="Type a message" type="text" name="textarea" [(ngModel)]="textArea"></textarea>

and in app.component.ts the variable “textArea”.

public textArea: string = '';

At this point, all that remains is to take advantage of our installed module.
We then add a button after the textarea to activate the emojiPicker and the emoji-mart directive

<button (click)="isEmojiPickerVisible = !isEmojiPickerVisible;">😀</button>
<br>
<emoji-mart class="emoji-mart" *ngIf="isEmojiPickerVisible" (emojiSelect)="addEmoji($event)" title="Choose your emoji"></emoji-mart>

Clearly, as it is possible to observe, some variables have been used that are not yet present within our typescript component.
For this reason, let’s go to the app.component.ts and complete our component with the boolean isEmojiPickerVisible and the addEmoji method

export class AppComponent {

public textArea: string = '';
public isEmojiPickerVisible: boolean;
public addEmoji(event) {
this.textArea = `${this.textArea}${event.emoji.native}`;
this.isEmojiPickerVisible = false;
}
}

What the addEmoji method basically does, is nothing more than to input the value of the selected emoji and close the Picker again (depending on the behaviour you want the Picker to have, you can comment or not the line of code)

Let’s style

As in everything, making a layout a little more pleasing to the eye is always an aspect that should not be underestimated, even if it is a simple tutorial.

Specifically, we go to our app.component.scss and add the following code

.container {
display: grid;
grid-template-columns: 100% 0%;
width: 36%;

button {
background: transparent;
border: 0;
transform: translateX(-40px);
cursor: pointer;
&:focus {
outline: 0;
}
}
}

Make sure you have enclosed the textarea and the button inside a div with class “container” as below

<div class="container">   <textarea placeholder="Type a message" type="text" name="textarea" [(ngModel)]="textArea"></textarea>   <button (click)="isEmojiPickerVisible = !isEmojiPickerVisible;">😀</button></div>

Final output

If you like this article press 👏 clap button 50 times or as many times you want. Feel free to ask a question if you have any. Thanks a lot for reading!

👨‍💻 Software dev ~ Frontend fan 🧙 ~ Alexa & AmazonSumerian enthusiast 🔮 ~ Those who can imagine anything, can create the impossible 💙

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store