Add Emoji to your Angular application
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/cliAt this point we create our workspace by running the following commands:
cd ~
ng new emoji-appWith 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 serveAt 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 --saveAt 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!
