Directives are one of the most powerful features of AngularJS. They allow you to create highly semantic and reusable components and manipulate pretty much everything in the DOM that you would want to. So in this post we`ve gathered some useful AngularJS directives which allow you to extend the HTML & add additional functionality to your web app.

Bootstrap

This repository contains a set of native AngularJS directives based on Bootstrap`s markup and CSS. As a result no dependency on jQuery or Bootstrap`s JavaScript is required.

Autosize

Angular 2 directive that automatically adjusts textarea height to fit content. It adjusts the textarea height automatically to any text input, or changes to the model bound to the textarea.

CRUD Table

Helpful AngularJS application with a directive to interact easily with the most common tasks of database with just a single line of code utilizing the power of AngularJs Directives, Filters, Factory, Resources.

File upload

Lightweight Angular directive to upload files with optional FileAPI shim for cross browser support.

Drag & drop list

Angular directives that allow you to build sortable lists with the native HTML5 drag & drop API. The directives can also be nested to bring drag & drop to your WYSIWYG editor, your tree, or whatever fancy structure you are building.

Tour

AngularJS directive for giving an interactive tour of your website.

Angular Cropper

A simple Angular directive that allows you to turn any image tag into an editable image, it creates a cropping interface for you to select the area to crop, it works with responsive images and with touch devices, compatible with modern browsers.

jAngular Toolkit

jAngular toolkit that mainly focus on areas that normally takes hours or days to complete. Such areas including complex forms e.g real estate, classified, invoive etc that involve form building, form validations and integration of uploads for media attachments. Via jAngular kit you can easily create challenging forms, complex validations, real time uploader attachment with applications and more on the fly

Slider

Slider directive implementation for AngularJS, without any dependencies.

Sticky

A simple, pure javascript AngularJS directive to make elements stick when scrolling down.

Autocomplete

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.

Lazy Image

Angular directive for loading responsive image when container (which is preventing reflow) is in viewport.

Paging

An Angular directive to aid paging large datasets requiring minimum paging information. This paging directive is unique in that we are only interested in the active page of items rather than holding the entire list of items in memory. This forces any filtering or sorting to be performed outside the directive.

FitText.js

ng-FitText.js makes font-sizes flexible. Use this AngularJS directive in your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.

Video Background

An Angular.js YouTube video background player directive that stresses simplicity and performance.

Carousel

This directive allows you to use the slick-carousel plugin as an angular directive.

Alert

ng-sweet-alert is an directive for sweet alert. Integration of sweet alert becomes very easy with angular js. There is no need to write a single line of javascript code. Only few html attribute is enough to use sweetalert.

Timeago

Angular directive/filter/service for formatting date so that it displays how long ago the given time was compared to now.

ngTagsInput

ngTagsInput is a highly customizable tags input directive built for the AngularJS framework, with no external dependencies.

Datepicker

calendar and datepicker directives for angular.

Tree Grid

A grid to display data in tree structure by using Angular and Bootstrap.

Ladda

Buttons with built-in loading indicators, effectively bridging the gap between action and feedback.

Counter

An AngularJS directive to animate number increment/decrement.

Resizable containers

A lightweight directive for creating resizable containers. The idea behind it was to completely separate the `layout logic` from the `resize logic`.

Recaptcha

Angular directive to add a reCaptcha widget to your form.