25 Awesome AngularJS Web UI Framework Components

Designing and implementing the UI of an application is an important part of the development process. Writing custom CSS style for each component from scratch can deliver a high level of customization, but also requires a large amount of resources. Sometimes it is better to use the existing UI frameworks. So here are some best UI frameworks based on AngularJS that provide ready to use UI components for the web.

PrimeNG

PrimeNG is a collection of rich UI components for AngularJS2. PrimeNG is a sibling of the popular JavaServer Faces Component Suite, PrimeFaces.

PrimeNG

vAccordion

Multi-level accordion component for AngularJS.

vAccordion

QuantumUI

QuantumUI is the most powerful and well designed NATIVE AngularJS and Bootstrap CSS based UI components make developer life easy. It complately MVVM structure, easy, light, fast, mobile friendly 25+ components and lots of native angular services.

QuantumUI

Suave

Suave UI is designed for web-applications based on AngularJS. It consists of CSS definitions, directives and services that helps build UI quick and efficiently.

Suave

Progress button styles

AngularJS version of codrops progress buttons for the use with promises.

Progress button styles

Tags

Pure AngularJS tagging widget with typeahead support courtesy of ui-bootstrap.

angular tags

Select

AngularJS-native version of Select2 and Selectize.

ui select

A tree component for AngularJS

Angular UI Tree is an AngularJS UI component that can sort nested lists, provides drag & drop support and doesn’t depend on jQuery.

tree component

Calendar

A complete AngularJS directive for the Arshaw FullCalendar.

Calendar

Bootstrap 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

Adapt strap

Lightweight UI Components/utilities based on AngularJs 1.2+ & Bootstrap 3.

Adapt strap

Mobile Angular UI

HTML5 mobile UI framework that will let you use Angular Js and Bootstrap 3 for mobile app development.

Mobile Angular UI

Angular UI Tree

AngularJS UI component that can sort nested lists, provides drag & drop support and doesn’t depend on jQuery

Angular UI tree

Date Time Picker

There are a number of date time pickers which works with AngularJs and Bootstrap, but the best I found so far is Angular UI Bootstrap Date Time Picker.

Date Time Picker

Ng-Notifications-Bar

Angular.js component for stylish and flexible top bar notifications.

Ng-Notifications-Bar

Sidenav

Simple component that reproduce the Angular Material Style SideNav Menu.

Sidenav

Nav tree

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.

Bootstrap nav tree

Angular busy

Show busy/loading indicators on any element during $http requests (or any promise).

angular busy

Tooltips

Angular Tooltips is an AngularJS directive that generates a tooltip on your element.

Tooltips

Formly

angular-formly is an AngularJS module which has a directive to help customize and render JavaScript/JSON configured forms. The formly-form directive and the formlyConfig service are very powerful and bring unmatched maintainability to your application’s forms.

formly

Google Maps

Angular Google Maps is a set of directives (part of angular-ui) written in CoffeeScript and Javascript which integrate Google Maps in an AngularJS applications.

google maps

Sortable

The JavaScript library for modern browsers and touch devices. No jQuery.

Sortable

Material Icons

AngularJS directive to use Material Design icons with custom fill-color and size.

material icons

Timer

Directives in AngularJS is a powerful way of building reusable UI components. This simple project will serve as a sample/reference implementation demonstrating its flexibilities by making it inter-operable across runtime (AngularJS, plain simple JavaScript & jQuery)

angular timer

Chart

angular directives for creating common charts using d3.

chart

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.