20 Angular UI Element Directives For Bootstrap

Directives are an awesome tool that essentially lets you create new HTML tags, or supercharge existing tags with attributes. Directives allow you to create custom HTML components. It can be attributes, classes or elements. Using elements allows us to create modular UI components for web apps. So in this post we`ve collected some useful Bootstrap ui components remade as AngularJS directives.

Dialog service

A complete AngularJS service with controllers and templates for generating application modals and dialogs for use with Angular-UI-Bootstrap and Twitter Bootstrap

Dialog service

Datetime picker

AngularJs directive to use a date and/or time picker as a dropdown from an input.

Datetime picker

adaptStrap

Lightweight UI Components/utilities.

adaptStrap

Tree directive

An AngularJS directive that creates a Tree based on a Bootstrap “nav” list. The style is completely Bootstrap because the tree is actually just a Bootstrap “nav” list, with a few changes: Indentation is added, expand/collapse icons are added, and Angular CSS animations are used during expand/collapse.

Tree directive

nya-bootstrap-select

An AngularJS select replacement which build select like dropdown component with collection and ng-model support

nya-bootstrap-select

contextMenu

AngularJS UI Bootstrap Module for adding context menus to elements.

contextMenu

Lightbox

When the lightbox is opened, navigating to the previous/next image can be achieved by clicking buttons above the image, clicking the left/right arrow keys, or swiping to the left/right (optional with ngTouch). The escape key for closing the modal is automatically binded by AngularUI Bootstrap.

Lightbox

Iconpicker

A Bootstrap 3 Icon Picker implemented in AngularJS.

Iconpicker

Switch

AngularJS directive for the bootstrap-switch jQuery plugin.

bootstrap-switch

Slider

This plugin was mostly put together quickly with the intent of using something that worked. It has zero test coverage. It is, however, registered on bower as angular-bootstrap-slider. Just include slider.js and use the package ui.bootstrap-slider. You will also need to include bootstrap-sliders CSS and JS.

slider

Confirm

A simple angular directive to display a bootstrap styled confirmation popover when an element is clicked.

Confirm

AutoFields

Avoid bloating your templates with repetitive form html. Instead, just specify a schema for the form and the model you want to bind it to and you’re done!

AutoFields

Off canvas

Off canvas side menu for use with ui-bootstrap 0.14+. Extends ui-bootstrap’s $uibModal provider.

Off canvas

Chat

Simple AngularJS Chat Directive with Bootstrap.

Chat directive

Notification

Angular.js service providing simple notifications using Bootstrap 3 styles with css transitions for animations.

Notification

Button

Angular/Bootstrap animated submit button directive.

Button

Placeholders

Angular directive for enhanced placeholders that easily integrate with Bootstrap form fields.

Placeholders

Tour

Angular UI Tour is a plugin that uses Angular UI Bootstrap’s popovers to display a guided product tour. This was originally inspired by Bootstrap Tour as Angular Bootstrap Tour, but after much feedback to remove the jQuery dependency, Angular UI Tour was born.

Tour

Formly

This is a template for angular-formly which adds templates with classes specific to bootstrap. Each field is wrapped in a div. This library is not standalone and requires angular-formly to be present and loaded.

Formly

Tab scroll

A scrollable tab plugin compatible with angular-ui bootstrap tabs

tab scroll

Leave a comment

Please be polite. We appreciate that. Your email address will not be published and required fields are marked

This site uses Akismet to reduce spam. Learn how your comment data is processed.