— an AngularJS widget to support @mentions

Jeff Collins
Sep 11, 2014 · 4 min read

The process of writing a first AngularJS widget

I wrote my first generic AngularJS component recently, called ( — to support twitter-style @mentions and macros functionality. I wanted to learn and experiment with Angular because we recently started moving our UI to this technology where I work. This technology change has been really challenging and energizing for our team. I talked a little about this transition at my company in a podcast recently.

I work at Lithium Technologies, an enterprise software company. One of our interesting constraints when we choose new user interface technology is that we focus on browser and mobile web instead of, for example, native experiences so that our customers can customize their own experience easily using Lithium’s customization platform. To support mobile and desktop, we provide responsive experiences for all devices, and the foundation of this is a platform that we built on Angular.

Because we are emphasizing mobile in our current development, we want experiences that are easy to use on smaller devices, especially if you’re contributing content. Features like macros and @mentions become really important to create a streamlined experience. I decided to take on the task of providing the @mentions and macros functionality in single component that was general enough to be open source. is actually a somewhat hard project to get started with in Angular because at the end of the day Angular seems to focus more MVC’izing the DOM and doesn’t necessarily help with the complex eventing and positioning that a widget like this needs. There’s also a trend going on that seems to be moving away from inclusion of jQuery, and instead just favoring the light-weight jQLite port bundled in Angular. So, I saw a gap in the Open Source “market” for this type of functionality, without jQuery, because is not the first widget to provide @mentions. I felt I could create a component that would be a very good fit for Angular developers, solve a tedious problem, while providing a valuable function. We certainly needed something in this area.

I partnered with Adam Ayres, who is mentioned in the podcast, and we put together a relatively polished first version of the component. It took a few rounds of thinking before we got something together that we felt good about building out. There was some heavy lifting involved for cursor positioning, and I learned a lot from the work of others.

The current product that you see today has a couple of design principles that I found myself gravitating toward as I worked through the code. They may not be the ideal form factor, but they tended to have the best optics in the example program as I worked through it.

  1. Stay out of the way of display
    When you use you get to control everything about the display. There are no restrictions or assumptions about the presentation. The framework provides typeahead processing, data binding, eventing, and positioning but no visual constraints or structure.
  2. Separate and externalize the mentio-menu element
    The first version of the component used a transclude but only supported one trigger character. This seemed natural for the developer, but lacked flexibility. So rather than trying to nest more things within the mentio directive, since it was going to effectively just be an attribute on an input element, I opted to separate the mentio-menu element into a completely separate element in the DOM. The separation of the elements instead of using some kind of nesting has been controversial, but the benefit of doing it this way is that the assignment of the mentio attribute is trivial and doesn’t significantly impact the input element it is being applied to.
  3. Provide a built-in default presentation
    Adam pushed for having a default menu built in, and it ended up paying dividends. Some of the early developers who adopted for a client wanted to only use the default (which references bootstrap).

This project was challenging, but the result is a non-trivial implementation that can save a lot of time for those who want something flexible for @mentions and macros functionality in their apps. It was highlighted by dailyjs recently, which really helped get enough of an audience to get real feedback and work through issues of making the widget broadly applicable. The process of putting this together also was useful for us at Lithium as we learn about how to “market” Open Source projects. It will eventually be time to move this project over to lithiumtech. For those interested, enjoy the component. It was a lot of fun for Adam and I to create.

    Jeff Collins

    Written by

    VP Eng @LithiumTech