Add Emoji to your Angular application

Image for post
Image for post
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.

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:

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

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.

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.

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.

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

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

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

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

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

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

At this point, we add our text-area

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

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

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

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)

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

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

Image for post
Image for post

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