Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

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: about 1 month 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.)