An AngularJS directive for converting text emojis into image-based emoticons, also supporting automatic multimedia link embedding
0 people use it
Author: 5389035?v=3 ritz078


An AngularJS filter/directive for converting text into emoticons, embedding videos (youtube/vimeo/mp4,ogg), audio, pdf, highlighting code syntax and embedding almost every service in an ordinary text string .

The demo examples are given here

PS : The jquery version of this module is embed-js.

Join the chat at



  • Converts emoticon text codes into emoticons :smile: , :heart:
  • Finds links in text input and turns them into html links.
  • Youtube and Vimeo video embedding with video details fetched from the api.
  • HTML5 player supported media embedding (mp3,mp4,ogg)
  • PDF viewing with preview and then the actual pdf in a frame.
  • Inline Code Syntax highlighting (uses highlight.js)
  • Twitter tweet embedding supported
  • Codepen, jsbin, jsfiddle, ideone, plunker and github gist embed supported
  • soundcloud and spotify support
  • Twitch tv, dotSub, dailymotion, TED and liveLeak support.


  • AngularJs 1.2 or above
  • angular-sanitize 1.2 or above
  • highlight.js (Optional if code highlighting required)
  • Twiiter widget js (if twitter embedding required)

Getting Started

Install through bower html bower install --save ng-embed Install through npm html npm install --save ng-embed

load css files html <link rel="stylesheet" href="path/to/ng-embed.min.css"/>

Then load the following files ```html

<!--==== Optional =====--> <!--===================-->


Load 'Emoticons' as a dependency javascript angular.module('yourAppname', ['ngEmbed'])

Filter Use

You can use the filter for basic use. Its features are limited to converting text into emojis, font smileys and HTML Links.

Options javascript embed:{ link :true, //for coverting urls into anchor tags linkTarget :'_self' //_blank|_self|_parent|_top|framename }

Directive Usage

The directive supports many features in additions to the features supported by the filter.

And is fully customizable

Directive ```html <ng-embed embed-data="text" embed-template-url="template.html" embed-options="options"


Attribute|Description ---------|----------- embed-data|The scope variable that contains the text string to be processed embed-options|The scope variable that contains the options object (mandatory) embed-template-url|User defined template for the processed text


Default Template

You can make your custom template and use it and even change the styling of the default template by changing the classes. I am giving you the default template so that you are not confused while making your own template and properly know the class names if you want to change the styling.

There are certain variables that are available for the template. Its structure is given below.

Template Variables

These variable can be used while you are creating your custom template.


The examples are given here


Older releases are listed here


  • If you are Interested in contributing to this project, you are most welcome.
  • If it is a bug-fix/improvement, first report it at issues
  • Discuss with us in detail about your issue/improvement
  • Get the issue allotted.
  • If you are contributing a bug-fix or a very minor addition, feel free to do a pull request on the master # branch.
  • If you are unsure about the bug/improvement, create an issue to discuss.
  • Report bugs @ issues


The MIT License (MIT)

Copyright (c) 2014 Ritesh Kumar

comments powered by Disqus
This page was last updated over 3 years ago.