Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by

How to add an Emoji Picker to your Angular App

Joe Robinson

April 29th, 2021

Written by

Joe Robinson

Category

How-tos & Tutorials

Tagged

If you were using a mobile device from 1997 onwards in Japan, you would’ve seen emojis before they were ever installed on devices around the rest of the world. Since then, Emoji have embedded themselves into digital communication and content creation, so your end users may now expect to see emoji in your app interface.

So, if you’re building web apps as part of your app engineering and development discipline, you may need to allow for the inclusion of an emoji picker in your design. If Angular is part of your skill set or discipline, or you’re learning to use Angular in your engineering and development career, it’s possible to take an emoji picker and integrate it into your app when you’re using TinyMCE as a rich text editor.

Here’s how to quickly add an emoji picker into TinyMCE when you’re working in Angular. Unfortunately, Angular versions below 5 are not supported. This ‘How to’ guide works for Angular with a rich text editor released after version 5.

Have your TinyMCE API key ready for this ‘How to’ guide.

Checking on your Angular installation

Install Node Package Manager (npm) and the Angular CLI. If you don’t have Angular installed, now’s your chance to test it out -- you’ll have taken the first step on the path to becoming a full stack developer.

However, it’s also a good idea to update Node Package Manager. After you’ve finished installing npm, open up a Terminal or PowerShell window, and run:

$ npm install npm@latest -g

With that complete, install the Angular CLI:

$ npm install -g @angular/cli

Tiny developed a thin wrapper between Angular, and the Tiny rich text editor. With this wrapper, you can connect Angular to TinyMCE.

Setting up Angular with TinyMCE and an Emoji Picker

To create a TinyMCE Angular project, change into the project directory, and then install the tinymce-angular package (the thin wrapper connecting TinyMCE to Angular):

$ ng new --defaults --skip-git tinymce-angular-demo
$ cd tinymce-angular-demo
$ npm install --save @tinymce/tinymce-angular

Rewriting the default Angular - TinyMCE app files

For the next step, set up your app by changing the default app.module.ts and app.component.html files. The pathway to find these files:

/your/environment/pathway/tinymce-angular-demo/src/app/

Now edit your app.module.ts file. It sounds drastic, but remove the demo contents of the typescript file, and then paste in the new content and save the changes:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { EditorModule } from '@tinymce/tinymce-angular';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
     AppComponent
   ],
   imports: [
    BrowserModule,
    EditorModule
   ],
   providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

Next edit your app.component.html file. Work in your API key at this stage. Again, remove the demo content and then paste in the following content and save the changes:

<h1>TinyMCE 5 Angular Demo</h1>
 <editor
   apiKey="your-api-key-lives-here"
   [init]="{
     height: 500,
     menubar: false,
     selector: '',
     plugins: [
       'advlist autolink lists link image charmap print preview anchor',
       'searchreplace visualblocks code fullscreen',
       'insertdatetime media table paste code help wordcount'
     ],
     toolbar:
       'undo redo | formatselect | bold italic backcolor | \
       alignleft aligncenter alignright alignjustify | \
       bullist numlist outdent indent | removeformat |help'
   }"
 ></editor>

At this stage, you can test out the modified app to see if it works:

$ ng serve --open

The result:

An instance of a TinyMCE 5 Angular Demo

There is a solution if you get stuck with a This Domain is not Registered notice.

Use the ctrl + c keys to stop the angular app running in your Terminal or PowerShell window.

Adding the Emoji Picker into the Angular app

Edit your app.component.html file to work in the TinyMCE emoticons plugin, and the emoticon option in the toolbar.

For this example, I placed the emoticon option at the end of the toolbar, offset by the pipe (|) character. Add in the emoticons_database object at the end of the editor content. Don’t forget to add a comma at the end of the toolbar options:

<h1>TinyMCE 5 Angular Demo</h1>
 <editor
   apiKey="your-api-key-lives-here"
   [init]="{
     height: 500,
     menubar: false,
     selector: '',
     plugins: [
       'emoticons advlist autolink lists link image charmap print preview anchor',
       'searchreplace visualblocks code fullscreen',
       'insertdatetime media table paste code help wordcount'
     ],
     toolbar:
       'undo redo | formatselect | bold italic backcolor | \
       alignleft aligncenter alignright alignjustify | \
       bullist numlist outdent indent | removeformat | emoticons  | help',
       emoticons_database: 'emojis'
   }"
 ></editor> 

With the plugin and toolbar modifications saved, restart the Angular app with the ng serve --open command in a Terminal or Powershell window.

Check on the Angular app with the TinyMCE editor. You can see the emoji ascii character on the toolbar, or type an emoji directly into the rich text editor by typing a ‘:’ followed by the emoji keyword.

TinyMCE 5 Angular 5 Demo with plugin and toolbar modifications

What’s next for your Angular app with TinyMCE?

It’s possible to change the type of emoji that appear in your app. You can manually add in a specific emoji, or link your Angular app to an emoji database.

Or, you can develop and engineer other features for your Angular app such as Creating a reactive form with Angular.

Contact us for more information about TinyMCE, or if you’re feeling adventurous and ready to try Tiny, sign up to get started.

Angular
byJoe Robinson

Technical and creative writer, editor, and a TinyMCE advocate. An enthusiast for teamwork, open source software projects, and baking. Can often be found puzzling over obscure history, cryptic words, and lucid writing.

Related Articles

  • How-tos & Tutorials

    How to get customer feedback (and what to do with it)

    by Qiran Gabrielle-Grace in How-tos & Tutorials
Subscribe for the latest insights served straight to your inbox every month.

Deploy TinyMCE in just 6 lines of code

Built to scale. Developed in open source. Designed to innovate.

Begin with your FREE API Key
Tiny Editor
Tiny logo
Privacy Policy - Terms of Use© 2021 Tiny Technologies Inc.TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.

Products

  • TinyMCE
  • Tiny Drive
  • Customer Stories
  • Pricing