Top 10 AngularJS Directives

Handsontable JavaScript Spreadsheet Most popular component for web apps

AngularJS has an awesome feature called directives if you didn’t know! 😉 AngularJS Directives in a nutshell provide the front-end developer with custom HTML DOM element representations. In short, this allows you to create your own HTML elements and include them in your ng-template markup partials. It’s hard to say which Angularjs Directives are top though. But here is a list of around 10 which we think should serve as good examples of how you might use the ng-directives in real world web apps. Enjoy.

1. Official AngularJS Directives

Before we look into some Angularjs directives which have been coded by the community (largely) it’s important to mention the directives which come as components in Angular core (around 30 directives). It’s always nice when the framework supports what you want to achieve out of the box! These directives can be used straight away in your ng templates and include useful directives like email inputs, change/blur, keypress events, copy/paste, mouse hover and more.

Directives Source Code GitHub Official Docs for Angular Directives

2. UI Bootstrap Directives

There are currently around 16 directives in the AngularUI Bootstrap including Accordion directive, Alert directive, Buttons directive, Carousel directive, Collapse directive, Datepicker directive, Dropdown directive, Modal directive, Pagination directive, Popover directive, Progressbar directive, Rating directive, Tabs directive, Timepicker directive, Tooltip directive and Typeahead directive.

UI Bootstrap GitHub UI Bootstrap Website
Modal Directive Code Model Demo

3. UI Grid (formerly ng-grid) Directives

UI-gridis currrently in beta and is an upgrade to ng-grid (which is still active). UI-grid is a data grid for AngularJS, part of the AngularUI suite which provides you with Directives for tables, sorting, filtering, grouping and more. There is a great tutorial to get you up and running and familiar with the new features.

GitHub UI-grid Website UI-grid UI-grid Tutorial Website ng-grid

4. Angular Unicorn Directive

Do you ever get depressed at how few unicorns there are in your AngularJS app? I certainly do. But worry no more, dear friend. With this directive, adding a unicorn to your app has never been easier.

Directives Source Code GitHub Demo

5. Angular Paste MS Excel Directive

A directive which allows for the copy and paste of Microsoft Excel data directly into the browser.

Directives Source Code GitHub Demo

6. angular-placeholders Directive

Directives in angularjs for placeholder images in any size and text based on the placeholders module (

Directives Source Code GitHub Demo

7. AngularJS Draw on Canvas Directive

Simple but nice directive to embed a HTML5 canvas drawing element on your page.

Directives Source Code Demo

8. Angular File Upload Directive

An AngularJS directive for file upload using HTML5 with FileAPI polyfill for unsupported browsers.

Directives Source Code GitHub Demo

9. Allmighty Autocomplete Directive

Simple to use autocomplete directive in a module for AngularJS! Supports arrow keys to traverse suggestions as well as mouse input. You can load the suggestions from a remote REST API, it also supports promises.

Directives Source Code GitHub Demo

10. Angular Leaflet Directives

This directive allows you to embed a map on your AngularJS application and interact bi-directionally with it via the AngularJS scope and the leaflet map library API.

Directives Source Code GitHub Demo


There are literally too many Angularjs directives to filter through and find the best ones would be a difficult task. At least there are a few resources here which should get you some examples of directives. I’ll try link to some tutorial posts here so you can learn more about how to code directives and get the true power out of them.

Sam Deering

Sam Deering

Sam is a web developer, online entrepreneur and investor. In his spare time he enjoys coding, playing chess and sharing what he learns with others.

Leave a Reply

Your email address will not be published. Required fields are marked *