An AngularJS filter for replacing emoji codes with actual high-definition emoticons (Retina friendly). (heavily inspired by Angular-Emoji-Filter)
This module is available via NPM or bower, install it with this command:
Via bower
bower install angular-emoji-filter-hd
Via NPM
npm install angular-emoji-filter-hd
See this plunker
- Add dbaq.emoji as a dependency
- Add ngSanitize as a dependency (belongs to AngularJS)
- Apply the filter within ng-bind-html:
<div ng-bind-html="message | emoji"></div>
- Optionally add aliases in config blocks via
emojiConfigProvider.addAlias("smile", ":)");
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="emoji.min.css">
<script src="angular.min.js"></script>
<script src="emoji.min.js"></script>
</head>
<body ng-app="app" ng-controller="AppCtrl">
<ul>
<li ng-bind-html="message | emoji"></li>
<li ng-bind-html="messageWithAliases | emoji"></li>
</ul>
</body>
</html>
angular.module("app", ["dbaq.emoji", "ngSanitize"])
.config(function(emojiConfigProvider) {
emojiConfigProvider.addAlias("smile", ":)");
emojiConfigProvider.addAlias("heart", "<3");
emojiConfigProvider.addAlias("ok_hand", "+1");
})
.controller("AppCtrl", function ($scope) {
$scope.message = "Animals: :dog: :cat: :snake: People: :smile: :confused: :angry: Places: :house: :school: :hotel: :poop:";
$scope.messageWithAliases = "Emoji with aliases: :) <3 +1";
});});
If your app is successful or if you are working for a company, please consider donating some beer money 🍺:
Keep in mind that I am maintaining this repository on my free time so thank you for considering a donation. 👍
The AngularJS Emoji filter HD is released under the MIT license as detailed in the LICENSE file that should be distributed with this library; the source code is freely available.
The filter was adapted by Didier Baquier from the work of James Allardice. The resources come from emoji codes website