Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/chyngyz/awesome-angular-components

This project is no longer supported.
https://github.com/chyngyz/awesome-angular-components

List: awesome-angular-components

angular angular-2 angular-components angular-extensions angular-material angular-ui

Last synced: 4 months ago
JSON representation

This project is no longer supported.

Awesome Lists containing this project

README 

        
# ![AngularJS](https://angular.io/resources/images/logos/standard/shield-large.png)



# Awesome Angular (v2^) Components Catalog - This project is no longer supported. Please refer to [Angular Components](http://devarchy.com/angular-components)



> Catalog of Angular components / modules / libraries



 - Contributions welcome, see [contribution guide](contribute.md)

 

> A curated list of helpful material to start learning Angular - [Angular 2 Education](https://github.com/timjacobi/angular2-education)







#### Contents

- [UI Components](#ui-components)

- [UI Layout](#ui-layout)

- [UI Animation](#ui-animation)

- [UI Frameworks](#ui-frameworks)

- [UI Utilites](#ui-utilites)

- [Code Design](#code-design)

- [Utilities](#utilities)

- [Tests](#tests)

- [Performance](#performance)

- [Dev Tools](#dev-tools)

- [Miscellaneous](#miscellaneous-4)






















# UI Components



###### Table / Data Grid



 - [ng2-table](https://github.com/valor-software/ng2-table) - Simple table extension with sorting, filtering, paging

 - [ng2-handsontable](https://github.com/valor-software/ng2-handsontable) - Angular 2 directive for Handsontable

 - [ag-grid](https://www.ag-grid.com/) - Advanced Data Grid

 - [ng2-smart-table](https://akveo.github.io/ng2-smart-table/) - Smart data table library with sorting, filtering, pagination & add/edit/delete functions.

 - [ngx-datatable](https://github.com/swimlane/ngx-datatable) - A feature-rich yet lightweight data-table crafted for Angular2



###### Infinite Scroll



 - [ng2-infinite-list](https://github.com/ng2-ui/ng2-infinite-list) - Angular2 Infinite Scroll Directive

 - [angular2-infinite-scroll](https://github.com/orizens/angular2-infinite-scroll) - Infinite Scroll Directive for angular 2



###### Modals



*Display overlay / modal / dialog*



 - [ng2-popup](https://github.com/ng2-ui/ng2-popup) - Angular2 Modal Directive

 - [angular2-modal](https://github.com/shlomiassaf/angular2-modal) - Angular2 Modal / Dialog window

 - [ng2-bs3-modal](https://github.com/dougludlow/ng2-bs3-modal) - Angular2 Bootstrap3 Modal Component

 - [ng2-bs4-modal](https://github.com/maxfisher05/ng2-bs4-modal) - Angular2 Bootstrap4 Modal Component



###### Notification



*A temporary little modal to notify the user*



 - [@ngrx/notify](https://github.com/ngrx/notify) - Web Notifications Powered by RxJS for Angular 2

 - [Angular2-Toaster](https://github.com/stabzs/Angular2-Toaster) - Angular2-toaster is an asynchronous, non-blocking Angular2 Toaster Notification library

 - [ng2-toasty](https://github.com/akserg/ng2-toasty) - Angular2 Toasty component shows growl-style alerts and messages for your app.

 - [angular2-notifications](https://github.com/flauc/angular2-notifications) - A light and easy to use notifications library for Angular 2. It features both regular page notifications (toasts) and push notifications.



###### Tooltips



 - [ng2-tooltip-overlay](https://github.com/ng2-ui/ng2-tooltip-overlay) - Angular2 Tooltip Directive



###### Menu



*Menus / Sidebars*



 - [ng2-menu](https://github.com/ng2-ui/ng2-menu) - Angular 2 Menu directive



###### Sticky



*Implementations similar to `position: sticky`*



 - [ng2-sticky](https://github.com/ng2-ui/ng2-sticky) - Angular2 "position: sticky" implementation as a directive



###### Tabs



 - [ng2-tab](https://github.com/ng2-ui/ng2-tab) - Angular 2 Tab Component

 



###### Breadcrumbs

 

 - [ng2-breadcrumb](https://github.com/gmostert/ng2-breadcrumb) - Dynamic breadcrumb trail.



###### Loading / Progress Indicators



*Let the user know that something is being loaded*



 - [ng2-progress-bar](https://github.com/pleerock/ng2-progress-bar) - Simple progress bar control for your angular2 applications using bootstrap3.

 - [angular2-busy](https://github.com/devyumao/angular2-busy) - Show busy/loading indicators on any promise, or on any Observable's subscription.

 - [ng2-slim-loading-bar](https://github.com/akserg/ng2-slim-loading-bar) - Angular 2 component shows slim loading bar at the top of the page.

 - [ng2-loading-animate](https://github.com/oxycoder/ng2-loading-animate) - Loading animation for angular 2

 - [angular2-circle-progress](https://github.com/Feridum/angular2-circle-progress) Simple Angular 2 Circle Progress Component



###### Carousels



 -



###### Collapse



 -



###### Charts



*Displays data in graphs / diagrams*



 - [ng2-charts](https://github.com/valor-software/ng2-charts) - Beautiful charts for Angular2 based on Chart.js

 - [ng2d3](https://swimlane.github.io/ng2d3/) - D3 + Angular2 Composable Re-usable Charting Framework

 - [ng2-nvd3](https://github.com/krispo/ng2-nvd3) - Angular2 component for nvd3

 - [angular2-chartist](https://paradox41.github.io/angular2-chartist/demo/) - Angular 2 component for Chartist.js

 - [ngx-charts](https://github.com/swimlane/ngx-charts) - Declarative Charting Framework for Angular2 and beyond!



###### Display a Tree Data Structure



 - [angular2-tree-component](https://github.com/500tech/angular2-tree-component) - A simple yet powerful tree component for Angular2

 - [ng2-tree](https://github.com/valor-software/ng2-tree) - Angular2 Tree component



###### UI Navigation



*Ways to navigate views*



 - [ng2-fullpage](http://meiblorn.github.io/ng2-fullpage/) - Create Beautiful Fullscreen Scrolling websites (now with Angular 2)



###### Custom Scrollbar



 - [ng2-slimscroll](https://github.com/jkuri/ng2-slimscroll) - Angular2 Customizable Scrollbar Directive

 - [angular2-perfect-scrollbar](https://github.com/zefoy/angular2-perfect-scrollbar) - Angular 2 wrapper library for perfect scrollbar



###### Media



*Audio / Video / PDF*



 - [ng2-pdf-viewer](https://github.com/VadimDez/ng2-pdf-viewer) - PDF Viewer Component for Angular 2

 - [Videogular](https://github.com/videogular/videogular2) - The HTML5 video player for Angular 2



###### Map



 - [ng2-map](https://github.com/ng2-ui/ng2-map) - Angular2 Google Maps Directives

 - [angular2-google-maps](https://angular-maps.com/) - Angular 2 components for Google Maps



###### Dropdown



 - [ng2-dropdown](https://github.com/pleerock/ng2-dropdown) - Simple dropdown for your angular2 applications using bootstrap3



###### Display time / date / age



 - [time-ago-pipe](https://github.com/AndrewPoyntz/time-ago-pipe) - An Angular 2 pipe for converting a date string into a time ago



###### Photo / Image Gallery



 - [ng2-image-gallery](https://github.com/bergben/ng2-image-gallery) - Basic Angular 2 image gallery using Bootstrap 4 and Fontawesome



###### Social Media / Share Buttons



 - [ng2-sharebuttons](https://murhafsousli.github.io/ng2-sharebuttons/) - Simple, lightweight, customizable share buttons with counts



###### Touch Swipe



 - [ng2-swipeable-card](https://github.com/JayKan/ng2-swipeable-card) - A small standalone Angular2 plugin that allows your card component to either swipe left or right.

 - [angular2-useful-swiper](https://github.com/Useful-Software-Solutions-Ltd/angular2-useful-swiper) - Use iDangero.us's great slider Swiper in Angular 2.



###### Miscellaneous



 - [ng2-pagination](http://michaelbromley.github.io/ng2-pagination/) Pagination for Angular2

 - [ng2-meta](https://github.com/vinaygopinath/ng2-meta) - Dynamic meta tags and SEO in Angular2

 - [angular2-clickoutside-directive](https://github.com/AvraamMavridis/angular2-clickoutside-directive) - Angular 2 directive that provides Click Outside Functionality

 - [angular2-fontawesome](https://github.com/travelist/angular2-fontawesome) - Angular2 Components and Directives for Fontawesome

 - [ng2-safe-img](https://github.com/hyzhak/ng2-safe-img) - Very tiny and safe img for Angular 2

 - [ng2-img-fallback](https://vadimdez.github.io/ng2-img-fallback/) - Load placeholder image on image error

 - [ng2-translate](https://github.com/ocombe/ng2-translate) - An implementation of angular translate for Angular 2.

 - [angular2-translate](https://github.com/Valetudox/angular2-translate) - simple translate service solution for Angular 2

 - [angular-pipes](https://github.com/fknop/angular-pipes) - Angular 2 pipes library

 - [ng-pipes](https://github.com/danrevah/ng-pipes) - Useful pipes for Angular 2+ with no external dependencies!

 - [angular2localization](https://github.com/robisim74/angular2localization) - An Angular 2 library to translate messages, dates and numbers.

 - [Chomsky-NG2](http://bullhorn.github.io/chomsky-ng2/) - A lightweight Angular 2 i18n wrapper.

 - [angular2-linky](https://github.com/dzonatan/angular2-linky) - Angular2 pipe to find links in text input and turn them into html links.

 - [angular2 embedly](https://github.com/frnd/angular2-embedly) - embed.ly directive and service for Angular2

 - [angular2-highlight-js](https://github.com/Useful-Software-Solutions-Ltd/angular2-highlight-js) - highlight.js integration with Angular2.

 - [ng-dynamic](https://github.com/laco0416/ng-dynamic) - Dynamic Content Projection in Angular 2+

 - [angular2-clipboard](https://github.com/maxisam/angular2-clipboard) - A wrapper directive for clipboard.js



### Component Collections



 - [NG2-UI](https://ng2-ui.github.io/) - A collection of quality Angular2 directives

 - [ng2-ue-utils](https://github.com/gabyvs/ng2-ue-utils) - Set of angular2 components, directives, pipes and services that will be shared among unified experience SPAs.

 - [ngx-ui](https://github.com/swimlane/ngx-ui) - Style and Component Library for Angular2 and beyond!



### Form Components



*Let the user enter data*



###### Date / Time picker



 - [ng2-datetime-picker](https://github.com/ng2-ui/ng2-datetime-picker) - Angular2 DateTime Picker

 - [mydatepicker](https://github.com/kekeh/mydatepicker) - Angular 2 date picker - Angular2 reusable UI component

 - [ng2-datepicker](https://github.com/jkuri/ng2-datepicker) - Angular 2 Datepicker Component

 - [ng2-date-picker](https://github.com/vlio20/ng2-date-picker) - Highly configurable date picker built for Angular 2



###### Rich Text Editing



 - [ng2-inline-editor](https://github.com/caballerog/ng2-inline-editor) An Angular 2 Component to edit inline any text.



###### Sortable List



*Let the user define an order on a list*



 - [ng2-ui-sortable](https://github.com/ng2-ui/ng2-ui-sortable) - Mobile-friendly re-arrangable list element



###### Drag and Drop



 - [ng2-dragula](http://valor-software.com/ng2-dragula/) - Simple drag and drop with dragula

 - [ng2-dnd](https://github.com/akserg/ng2-dnd) - Angular 2 Drag-and-Drop without dependencies



###### Autocomplete



*Autosuggest / autocomplete / typeahead*



 - [ng2-auto-complete](https://github.com/ng2-ui/ng2-auto-complete) - Angular2 Auto Complete



###### Select



 - [ng2-select](https://github.com/valor-software/ng2-select) - Angular2 based replacement for select boxes



###### Color Picker



 - [angular2-color-picker](https://github.com/Alberplz/angular2-color-picker) - Angular 2 Color Picker Directive, no dependences required.

 - [ng2-color-picker](https://github.com/AndyMeps/ng2-color-picker) - Simple color picker for Angular 2



###### Toggle



 - [angular2-feature-toggle](angular2-feature-toggle) - Your module to handle with feature toggles in Angular2 applications easier.



###### Slider



 - [ng2-nouislider demos](https://github.com/tb/ng2-nouislider) - Angular2 noUiSlider directive



###### Radio / Checkbox buttons



 - [ng2-select-controls](https://github.com/pleerock/ng2-select-controls) - Checkbox group and radio group control for your angular2 applications using bootstrap3.



###### Type Select



*Let the user select a tag / something while typing*



 - [ng2-tag-input](https://github.com/Gbuomprisco/ng2-tag-input) - Tag Input component for Angular 2. Blandly inspired by Angular material's 



###### Masked Input



 - [text-mask](https://github.com/text-mask/text-mask) - Input mask for React, Angular, Ember, Vue, & plain JavaScript



###### File Upload



 - [ng2-file-upload](https://github.com/valor-software/ng2-file-upload) - Easy to use Angular2 components for files upload

 - [fileDroppa](https://github.com/ptkach/fileDroppa) - Angular2 File Dropzone

 - [ngx-uploader](https://github.com/jkuri/ngx-uploader) - Angular2 File Uploader



###### Autosize Input / Textarea



 -



###### Image Editing



 - [angular2-img-cropper](https://github.com/cstefanache/angular2-img-cropper) - Angular 2 Image Cropper



###### Markdown / Text Editor



 - [ng2-ace](https://github.com/seiyria/ng2-ace) - A basic ace editor directive for angular 2.

 - [angular2-froala-wysiwyg](https://github.com/froala/angular2-froala-wysiwyg) - AngularJS2 bindings for Froala WYSIWYG HTML Rich Text Editor.



###### Form Component Collections



 - [Angular Formly](https://ng2.angular-formly.com/) - JavaScript/JSON powered forms for Angular 2



###### Miscellaneous



 - [Ng2 Validators](https://github.com/gangachris/angular2-validators) - A List of validators for Angular 2 Forms based on validator.js

 - [ng2-recaptcha](https://github.com/dethariel/ng2-recaptcha) - Angular 2 component for Google reCAPTCHA

 - [angular2-recaptcha](https://github.com/xmaestro/angular2-recaptcha) - Angular 2 : Typescript component for Google reCaptcha

 - [Angular2 Schema Form](https://github.com/makinacorpus/angular2-schema-form) - Angular2 Schema Form is an Angular2 module allowing you to instanciate an HTML form from a JSON schema.

 - [angular2-prettyjson](https://github.com/matiboy/angular2-prettyjson) - A module for Angular 2 debug output of objects. Contains a pipe similar to JsonPipe but adds support for spacing and handling of circular structures.



# UI Layout



*Components to layout the app's UI*



 - [angular2-grid](https://github.com/BTMorton/angular2-grid) - A drag/drop/resize grid-based plugin directive for angular2



# UI Animation



*Animate transitions*



 -



###### Parallax



 - [ng2-parallax-scroll](https://github.com/ng2-ui/ng2-parallax-scroll) - Angular2 parallax background scroll directive



# UI Frameworks



### Mobile Frameworks



 - [Ionic Framework](http://ionicframework.com/) - Hybrid Mobile App Framework for iOS, Android and Windows.

 - [onsenui](https://github.com/OnsenUI/OnsenUI) - Hybrid Mobile App UI Framework for iOS and Material Design with Angular and React Components.

 -



### UI Frameworks



 - [Kendo UI for Angular 2](http://www.telerik.com/kendo-angular-ui/) - A flexible and beautiful UI Components for Angular 2

 - [PrimeNG](http://www.primefaces.org/primeng/) - A collection of rich UI components for Angular 2

 - [Wijmo 5](http://wijmo.com/angular2/) - The First Complete Collection of Angular 2 Components

 - [NG-Lightning](http://ng-lightning.github.io/ng-lightning/#/) - Native Angular 2 components & directives for Lightning Design System

 - [ngSemantic](https://ng-semantic.herokuapp.com/) - Angular2 building blocks based on Semantic UI

 - [Teradata Covalent UI Platform](https://teradata.github.io/covalent/#/) - UI platform built on Angular 2.0 + Material Design

 - [Fuel-UI](http://fuelinteractive.github.io/fuel-ui/#/) - A collection of native Angular 2 components, directives, and pipes for Bootstrap 4.

 - [novo-elements](https://github.com/bullhorn/novo-elements) - UI Repository for Bullhorn's Novo Theme

 - [jQWidgets](http://www.jqwidgets.com/angular/) -  jQWidgets Angular 2 UI components



###### Bootstrap



 - [ng2-bootstrap](http://valor-software.com/ng2-bootstrap/#/) - Native angular 2 directives for Bootstrap 3

 - [ngBootstrap](https://ng-bootstrap.github.io/#/home) - Native angular 2 directives for Bootstrap 4



###### Material Design



 - [Angular 2 Material](https://material.angular.io/) - Angular team's Material Design components built on top of Angular 2.

 - [md2](https://github.com/Promact/md2) - Angular2 based Material Design components

 - [angular2-mdl](https://github.com/mseemann/angular2-mdl) - Angular 2 components, directives and styles based on material design lite

 - [angular2-materialize](https://github.com/InfomediaLtd/angular2-materialize) - Angular 2 support for Materialize CSS framework [https://github.com/Dogfalo/materialize](https://github.com/Dogfalo/materialize)



# UI Utilites



### Reporter



*Report computed styles*



###### Visibility Reporter



*Report when a component becomes visible/hidden*



 -



###### Measurement Reporter



*Determine and report measurements of an element*



 -



### Device Events



###### Keyboard Events



 -



###### Scroll Events



 - [ng2-scrollable](https://github.com/ng2-ui/ng2-scrollable) - Angular2 Automatic Scroll Detection With Animation

 - [ng2-page-scroll](https://github.com/Nolanus/ng2-page-scroll) - Animated scrolling functionality written in pure angular2



###### Touch Events



 -



###### Mouse Events



 -



### Test User Behavior



*A/B tests, experiments, ...*



 -



# Code Design



*Libraries that help with code design*



###### Data Store



*Data flow / data management / data stores / components state / data flow*

 - [@ngrx/store](https://github.com/ngrx/store) - RxJS powered state management inspired by Redux for Angular 2 apps

 - [tiny-ng-store](https://github.com/JScearcy/tiny-ng-store) - Small Angular 2 store for quick setup

 - [ng2-mobx](https://github.com/500tech/ng2-mobx) - MobX connector to Angular 2

 - [ng2-ui-storage](https://github.com/ng2-ui/ng2-ui-storage) - Provides memory storage fallback for localStorage and sessionStorage

 - [angular2-locker](https://github.com/MikaAK/angular2-locker) - Wrapper around cookies/sessionStorage/localStorage for angular2. If all are unavailable will use an in memory storage.

 - [angular2-cookie](https://github.com/salemdar/angular2-cookie) - Implementation of Angular 1.x $cookies service to Angular 2



###### Form Logic



 -



###### Router



 - [@ngrx/router](https://github.com/ngrx/router) - Reactive Router for Angular 2



###### Props from server



*Component properties asynchronously fetched over the network*



 -



###### Communication with server



 -



###### CSS / Style



 -



###### HTML Template



 - [ng-html2js](https://github.com/yaru22/ng-html2js) - Standalone script to turn Angular template into js and put it in a module.



###### Isomorphic Apps



 - [Universal Angular 2](https://github.com/angular/universal) - Universal (isomorphic) javascript support for Angular2

 - [Angular2 Universal Starter Kit](https://github.com/alexpods/angular2-universal-starter) - Enjoy Server Side rendering and Web Workers in your Angular2 Application



###### Boilerplate



*Boilerplates /  scaffolds / starter kits / generators / stack ensembles*



 - [angular2-webpack-starter](https://github.com/AngularClass/angular2-webpack-starter) - An Angular 2 Starter kit from AngularClass

 - [angular-seed](https://mgechev.github.io/angular-seed/) - High-quality, modular starter (seed) project for Angular 2 apps with statically typed build and AoT

 - [angular2-webpack](https://github.com/preboot/angular2-webpack) - A complete, yet simple, starter for Angular 2 using webpack

 - [angular2-seed](https://github.com/angular/angular2-seed) - Angular 2 seed project from Angular team.

 - [angular-seed-advanced](https://github.com/NathanWalker/angular-seed-advanced) - An advanced Angular2 seed project with support for ngrx/store, ngrx/effects, ng2-translate, angulartics2, lodash, NativeScript, Electron (Mac, Windows and Linux desktop) and more.

 - [angular2-rollup-starter](https://github.com/jkuri/angular2-rollup-starter) - Angular2 & Rollup.js including AoT and Universal support



###### Miscellaneous



 - [angular-oauth2](https://github.com/oauthjs/angular-oauth2) - AngularJS OAuth2

 - [ng2-ui-auth](https://github.com/ronzeidman/ng2-ui-auth) - An angular2 repository for authentication based on angular1's satellizer



# Utilities



-



###### REST API



 - [ng2-rest-api](https://github.com/zaqqaz/ng2-rest-api) - Rest API provider for angular 2.

 - [angular2-jsonapi](https://github.com/ghidoz/angular2-jsonapi) - A lightweight Angular 2 adapter for JSON API

 - [ng2-restangular](https://github.com/2muchcoffeecom/ng2-restangular) - Restangular for Angular 2

 - [ng2-resource-rest](https://github.com/troyanskiy/ng2-resource-rest) - Resource (REST) Client for Angular 2



###### Framework bindings / integrations



 - [angularfire2](https://github.com/angular/angularfire2) - The official Angular 2 library for Firebase

 - [angular2-odata](https://github.com/gallayl/angular2-odata) - OData service for Angular2



###### Integrations with Third Party Services



 - [angulartics2](https://github.com/angulartics/angulartics2) - Web analytics for Angular 2 applications

 - [ng2-wp-api](https://github.com/MurhafSousli/ng2-wp-api) - Angular2 WordPress Module

 - [angular2-apollo](http://dev.apollodata.com/angular2/) - Angular 2 integration for the Apollo Client

 - [ng2-cloudinary](https://github.com/ekito/ng2-cloudinary) - Angular2 components for Cloudinary image back-end

 - [angular2-disqus](https://github.com/Useful-Software-Solutions-Ltd/angular2-disqus) - A DISQUS integration for Angular2

 - [ng2-disqus](https://github.com/threesquared/ng2-disqus) - Angular 2 component for Disqus

 - [pubnub-angular2](https://github.com/pubnub/pubnub-angular2) - Pubnub Angular2 service is a wrapper for PubNub JavaScript SDK version 4

 - [selfbits-angular2-sdk](https://github.com/selfbits/selfbits-angular2-sdk) - Angular 2 SDK for Selfbits Backend-as-a-Service

 - [stormpath-sdk-angular](Angular 2 Components for Stormpath) - Angular 2 Components for integrating with Stormpath's API

 - [angular2-cloudtasks](https://github.com/Cloudtasks/angular2-cloudtasks) - Helps using Cloudtasks.io image processing task by substituting your images sources with the processing URL.



# Tests



 -



# Performance



### UI



 -



###### Inspect



 -



###### Lazy Load



 - [ng2-image-lazy-load](https://github.com/NathanWalker/ng2-image-lazy-load) - Angular2 image lazy loader library

 - [angular2-imagelazyload-directive](https://github.com/AvraamMavridis/angular2-imagelazyload-directive) - Angular2 image lazy load directive



### App Size



 -



# Dev Tools



###### Inspect



 - [@ngrx/store-devtools](https://github.com/ngrx/store-devtools) - Devtools for @ngrx/store

 - [@ngrx/store-log-monitor](https://github.com/ngrx/store-log-monitor) - Port of redux-devtools-log-monitor for Angular 2 and @ngrx/store-devtools

 - [angular2-logger](https://github.com/code-chunks/angular2-logger) - A log4j inspired logger for angular 2.

 - [ng2-logger](https://github.com/noemi-salaun/ng2-logger) - Angular 2 logger service



###### Miscellaneous



 - [@ngrx/effects](https://github.com/ngrx/effects) - Side effect model for @ngrx/store



# Miscellaneous



 - [Angular 2 IoT](https://github.com/urish/angular2-iot) - Internet of Things directives for Angular 2 (Led, Button, etc.)