How to add twitter emoji to your Angular app with Twemoji
Emoji's are a fun way to add a little life to any app you are building, but a problem you might encounter is that they look different on iOS, Android, Windows and macOS.
Emoji’s are part of the Unicode Standard and as of March 2020 there are 3,304 total, with more added on each release. Twitter has put together a fantastic free JavaScript library Twemoji, which provides a standardized bundle of emoji in both SVG and PNG formats.
Getting Started
Head over to Twemoji’s GitHub page and follow the usage instructions. For this example I am adding the CDN link directly to my index.html file at the root of my angular project.
Creating the Angular Pipe
Using the Angular CLI, add a new pipe to your project and add the following code to it.
ng generate pipe Emoji
Using the Pipe
Lets break down what is happening here,
- Create a html element in which the emoji will be displayed
- Bind the [innerHtml] attribute to the Codepoint of the emoji you want to display, leaving out the proceeding “U+” as it is not needed.
To see a full list of emoji’s and their Codepoints take a look at https://emojipedia.org/twitter/.
- Add your newly created emoji pipe, which will generate a img within the innerHtml of your element
Putting it all together!
As part of building Canvas by Noviggo, we are using emoji’s to represent the confidence one has in a idea as they are thinking about it. We are super excited with the results we have gotten after using Twemoji, and look forward to leveraging them more for future projects.
If you are interested in seeing these emoji’s in action and maybe starting a new business idea, head on over to our site to get started for free!
