Awesome
Angular 2+ Components & Libraries
- Official website:
devarchy.com/angular - Use devarchy to add a library to the catalog
Contents
- UI Components
- UI Layout
- UI Frameworks
- Isomorphic Apps
- Code Structure
- Code Style
- Utilities
- Performance
- Integrations
- Dev Tools
- Starter Kit
UI Components
Overlay
Overlay / modal / alert / dialog / lightbox / popup
- angular2-modal - Angular2 Modal / Dialog window.
- ng2-bs3-modal - Angular2 Bootstrap3 Modal Component.
Notification
Toaster / snackbar — Notify the user with a modeless temporary little popup
- angular2-toaster - Angular2-toaster is an asynchronous, non-blocking Angular2 Toaster Notification library.
- ng2-toasty - Angular2 Toasty component shows growl-style alerts and messages for your app.
- ng2-notifications - Angular 2 Component for Native Push Notifications.
- ngx-toastr - Angular 2 toastr.
- @ngrx/notify - Web Notifications Powered by RxJS for Angular.
- angular2-notifications - A light and easy to use notifications library for Angular 2. It features both regular page notifications (toasts) and push notifications.
- angular-notifier - A well designed, fully animated, highly customizable, and easy-to-use notification library for your Angular 2+ application.
- ng2-toastr - Bootstrap style toast for modern angular (v2.0.0 and above).
Popover
Show a little dialog next to an element
- angular-confirmation-popover - Displays a bootstrap confirmation popover (with no jQuery or bootstrap JS!).
Table
Table / Data Grid — Display (large) datasets
- @swimlane/ngx-datatable - A feature-rich yet lightweight data-table crafted for Angular2 and beyond.
- ng2-table - Simple table extension with sorting, filtering, paging... for Angular2 apps.
- angular2-datatable - DataTable - Simple table component with sorting and pagination for Angular2.
- ng2-easy-table - The easiest Angular2 table.
- ng2-handsontable - Angular 2 directive for Handsontable.
- ag-grid-angular - Ag-Grid Angular 2 Component.
- ng2-smart-table - Angular 2 Smart Data Table component.
Tree
Visualize data as a tree
- angular2-tree-component - A simple yet powerful tree component for Angular2.
- ng2-tree - Angular2 component for visualizing data that can be naturally represented as a tree.
Loading / Progress Indicators
Let the user know that something is being loaded
- ng2-slim-loading-bar - Angular 2 component shows slim loading bar at the top of the page.
- angular2-busy - Show busy/loading indicators on any promise, or on any Observable's subscription.
- angular2-ladda - Angular 2 Ladda module.
- ng-spin-kit - SpinKit ( spinners for Angular 2+.
- ngx-progressbar - Angular progress bar.
Menu
Menu / sidebar
- ng-sidebar - Angular 2+ sidebar component.
Charts
- ng2-charts - Beautiful charts for Angular2 based on Chart.js.
- ngx-charts - Declarative Charting Framework for Angular2 and beyond.
- angular2-highcharts - Highcharts for your Angular2 project.
- ng2-nvd3 - Angular2 component for nvd3.
Map
- angular2-google-maps - Angular 2+ Google Maps Components.
- ng2-map - Angular2 Google Maps Directives.
- angular2-esri4-components - A set of Angular 2 components to work with ArcGIS API for JavaScript v4.1.
List Virtualization
- od-virtualscroll - Observable-based virtual scroll implementation in Angular
Infinite Scroll
- ngx-infinite-scroll - Infinite Scroll Directive for angular 2.
Parallax
Parallax effect while scrolling
- ng2-parallax-scroll - Angular2 parallax background scroll directive.
Scrollbar
Replace the browser scrollbar with a custom one
- angular2-perfect-scrollbar - Angular 2 wrapper library for perfect scrollbar.
Carousel
Carousel / touch slider / swiper
- angular2-swiper-wrapper - Angular 2 wrapper library for swiper.
Sticky
Implementations similar to position: sticky
- @ngui/sticky - Angular2 "position: sticky" implementation as a directive.
Context Menu
- angular2-contextmenu - A context menu built with Angular 2 inspired by ui.bootstrap.contextMenu.
Time
Display time / date / age
- angular2-moment - Moment.js pipes for Angular2.
Audio / Video
- videogular2 - The HTML5 video player for Angular 2.
SVG
- ng-inline-svg - Angular 2+ directive for inserting an SVG file inline within an element.
Social Sharing
- ng2-sharebuttons - Share buttons for angular.
- ng2-pdf-viewer - PDF Viewer Component for Angular 2.
Miscellaneous
- ng2-inline-editor - Native UI Inline-editor Angular2 component.
- ng2-markdown-to-html - Angular 2 markdown component/directive to parse static or remote content to html.
- ngx-no-animation-for-dinosaur - Simple solution for disabling animation for certain old browser
Form
Let the user create & edit data
Date Picker
Time Picker / Datetime Picker
- ng2-datepicker - Angular2 Datepicker Component.
- mydatepicker - Angular2 date picker.
- ng2-datetime - Datetime picker plugins wrapper for Angular2.
- ng2-date-picker - Highly configurable date picker built for Angular 2 applications.
- angular2-material-datepicker - A minimalist datepicker inspired by Google's material design.
Color Picker
- ngx-color-picker - Color picker widget for Angular 2+.
- angular2-color-picker - Angular 2 Color Picker Directive, no dependences required.
- ng2-color-picker - Simple color picker for Angular 2.
Slider
Let the user choose a value from a given range
- ng2-slider-component - Angular 2 slider component.
Select
Let the user choose from a list of options
- ng2-select - Angular2 based replacement for select boxes.
- angular2-select - A native angular 2 select component (based on select2).
Autocomplete
Autosuggest / autocomplete / typeahead
- ng2-completer - Angular 2 autocomplete component.
- ng2-auto-complete - Angular2 Auto Complete.
Type Select
Let the user select a tag / something while typing
- ng2-tag-input - Tag Input for Angular.
Drag and Drop
- ng2-dragula - Simple drag and drop with dragula.
- ng2-dnd - Angular 2 Drag-and-Drop without dependencies.
- ng-drag-drop - Angular 4 Drag & Drop based on HTML5 with no external dependencies.
Sortable List
Let the user define an order on a list
- angular-sortablejs - A Angular 2+ binding to SortableJS.
Masked Input
- angular2-text-mask - Input mask for React, Angular, Ember, Vue, & plain JavaScript.
- soft-angular-mask - Directive to masquerade input in angular 2/4 (money and number).
Rich Text Editor
- ng2-ckeditor-codemirror - Angular2 CKEditor component.
- angular2-voog-wysihtml - Voog wysihtml wrapper for Angular 2.
- angular2-froala-wysiwyg - AngularJS2 bindings for Froala WYSIWYG HTML Rich Text Editor.
File Upload
- ng2-file-upload - Easy to use Angular2 components for files upload.
- ngx-uploader - Angular File Uploader.
- angular2-dropzone-wrapper - Angular 2 wrapper library for dropzone.
Autosize Input / Textarea
- angular2-autosize - Angular2-autosize is an Angular2 directive that automatically adjusts textarea height to fit content.
Calendar
Show & edit events in a calendar view
- angular2-calendar - A flexible calendar component for angular 2.0+ that can display events on a month, week or day view.
- angular2-fullcalendar - An Angular 2 component for fullcalendar.
Image Editing
Image manipulation
- ng2-img-cropper - Angular 2 Image Cropper.
UI Layout
Layout the overall / main view
- angular2-grid - A grid-based drag/drop/resize directive plugin for Angular 2.
- ng2-fullpage - Angular 2 fullpage scrolling.
- angular-split - Angular (2+) UI library to split views.
- ngresizable - Simple, tree-shakable, AoT, Universal and Web Worker friendly resizable component for Angular
Responsive
UI Frameworks
Responsive
Set of components + responsive layout system
- ng2-bootstrap - Native Angular directives for Bootstrap.
- @ng-bootstrap/ng-bootstrap - Angular powered Bootstrap.
- ng-semantic - Angular 2 building blocks based on Semantic UI.
- angular2-materialize - Angular 2 support for Materialize CSS framework.
- ng2-semantic-ui - Semantic UI Angular 2 Integrations -- no JQuery required --.
- clarity-angular - Clarity Design System: UX guidelines, HTML/CSS framework, and Angular 2 components working together to craft exceptional experiences.
- @covalent/core - Teradata UI Platform built on Angular-Material 2.0.
Component Collections
Set of components without layout system
- @angular/material - Official Material Design components for Angular.
- primeng - UI Components for Angular 2.
- ng-lightning - Native Angular 2 components & directives for Lightning Design System.
- angular2-mdl - Angular 2 components, directives and styles based on material design lite.
- fuel-ui - UI Components for use with Angular2 and Bootstrap4.
- igniteui-angular2 - Ignite UI directives for Angular 2.
- md2 - Angular2 based Material Design components, directives and services are Accordion, Autocomplete, Collapse, Colorpicker, Datepicker, Dialog(Modal), Menu, Multiselect, Select, Tabs, Tags(Chips), Toast and Tooltip.
- igniteui-js-blocks - Mobile-first Angular native components.
- devextreme-angular - Angular 2 UI and visualization components based on DevExtreme widgets.
- ng-zorro-antd - An enterprise-class UI components based on Ant Design and Angular.
Mobile
- ionic2 - Build amazing native and progressive web apps with Angular and open web technologies. One app running on everything.
- angular2-onsenui - Mobile app development framework and SDK using HTML5 and JavaScript. Create beautiful and performant cross-platform mobile apps. Based on Web Components, and provides bindings for Angular 1, 2, React and Vue.js.
Admin panel
Admin panels / dashboard
- ngx-admin - Admin template based on Nebular framework (Angular 4+, Bootstrap 4+).
Isomorphic Apps
Server-side rendering
- angular-ssr - Angular 4+ server-side rendering solution
- @ng-seed/universal - Seed project for Angular Universal apps featuring Server-Side Rendering (SSR), Material Design & Flexbox, Webpack, dev/prod modes, DLLs, AoT compilation, HMR, SCSS compilation, lazy loading, @ngrx/store, config, cache, i18n, SEO, angulartics2 and TSLint/codelyzer.
Code Structure
Improve overall design of the source code
Data Management
Data flow / data store / data flow
- @angular-redux/store - Angular 2 bindings for Redux.
- @ngrx/store - RxJS powered state management for Angular applications, inspired by Redux.
- mobx-angular - MobX connector to Angular 2.
- @ngx-config/core - Configuration utility for Angular.
Communication with Server
- apollo-angular - Angular integration for the Apollo Client.
Code Style
Improve readability of the source code
- codelyzer - Linting for Angular projects.
- babel-plugin-angular2-annotations - A babel transformer plugin for Angular 2 annotations.
- redux-decorators - A ridiculously good syntax for working with Redux using decorators in ES7 / TypeScript. Currently limited to Angular 2 but could potentially be used elsewhere.
- angular-tslint-rules - Shared TSLint & codelyzer rules to enforce a consistent code style for Angular development.
Utilities
Pipes
- angular-pipes - Useful pipes for Angular.
- ngx-pipes - Useful pipes for Angular 2 and beyond with no external dependencies.
- ng-pipes - Bunch of useful pipes for Angular2 (with no external dependencies!).
- angular2-linky - Linky pipe for angular2.
Form
Utilities to help create HTML forms
- angular2-schema-form - Angular2 Schema Form (DISCLAIMER: it is not related to angular-schema-form).
- ng-formly - JavaScript powered FORMS for ANGULAR 2.x and above.
- @ultimate/ngxerrors - A declarative validation module for reactive forms.
Animations
- ng-animate - 🌙 A collection of cool, reusable and flexible animations for Angular 4.2+
API
Utilities to consume APIs
- angular2-rest - Angular2 HTTP client to consume RESTful services. Built with TypeScript.
- ng2-resource-rest - Resource (REST) Client for Angular 2.
- angular2-jsonapi - A lightweight Angular 2 adapter for JSON API.
- ng2-rest-api - Rest API provider for angular 2.
- ngx-restangular - Restangular for Angular 2+ and higher versions.
Authentication
- ng2-ui-auth - An angular2 repository for authentication based on angular1's satellizer.
- angular2-token - Token based authentication service for Angular2 (ng2) with multi-user support. Works best with the devise token auth gem for Rails.
- angular-oauth2-oidc - Support for OAuth 2 and OpenId Connect (OIDC) in Angular.
- angular-oauth2 - AngularJS OAuth2.
- @ngx-auth/core - Authentication utility for Angular.
Event Handling
- ng-click-outside - Angular 2+ directive for handling click events outside of an element.
Scroll
- ng2-page-scroll - Animated scrolling functionality written in pure angular2.
- @ngui/scrollable - Angular2 Automatic Scroll Detection With Animation.
- ng2-scrollspy - Angular2 ScrollSpy Service.
Responsive Design
- ng2-responsive - Superset of RESPONSIVE DIRECTIVES to show or hide items according to the size of the device screen and another features in Angular 2.
Persistence
- angular2-localstorage - Angular2 decorator to save and restore variables/class properties to HTML5 LocalStorage automatically.
- ng2-webstorage - Localstorage and sessionstorage manager - angular2 service.
- angular-safeguard - Wrapper around cookies/sessionStorage/localStorage for angular2. If all are unavailable will use an in memory storage.
- @ngx-cache/core - Cache utility for Angular.
Cookie
Cookie manipulation
- angular2-cookie - Implementation of Angular 1.x $cookies service to Angular 2.
Routing
- ng2-breadcrumb - This is an angular 2 component that creates a breadcrumb trail. It hooks into the angular2/router, to dynamically build up the crumb trail once a component is routed to.
- ng2-page-transition - Simple Angular2 component to create a page transition animation on route changes.
- @ngx-i18n-router/core - Route internationalization utility for Angular.
Pagination
- ng2-pagination - Pagination for Angular.
Validation
- ng-validators - A List of validators for Angular 2+ Forms based on validator.js.
- ng2-validation - Angular2 validation.
i18n
Internationalization / L10n / localization / translation
- @ngx-translate/core - The internationalization (i18n) library for Angular 2+.
- angular-l10n - An Angular 2 library to translate messages, dates and numbers.
- @ngx-universal/translate-loader - Loader for @ngx-translate that provides translations to browser/server platforms.
Logging
- angular2-logger - A log4j inspired logger for angular 2.
- @nsalaun/ng2-logger - Angular 2 logger service.
Asset management
Utilities for building / bundling / loading assets
- plugin-typescript - TypeScript loader for SystemJS.
- gulp-inline-ng2-template - Gulp plugin to inline HTML and CSS into Angular 2 component decorators.
- angular2-template-loader - Chain-to loader for webpack that inlines all html and style's in angular2 components.
- angular-router-loader - A Webpack loader that enables string-based module loading with the Angular Router.
- angular2-hot-loader - Angular 2 hot loader.
Meta Tags
Set meta tags, <title>, children of <head>
- ng2-meta - Dynamic meta tags and SEO in Angular2.
- @ngx-meta/core - Dynamic page title & meta tags utility for Angular (w/server-side rendering).
Clipboard
Copy & paste text to clipboard
- ngx-clipboard - A wrapper directive for clipboard.js.
Angular 1 -> Angular 2 Migration
- ng-metadata - Angular 2 decorators and utils for Angular 1.x.
- angular2-now - Angular 2 @Component syntax for Angular 1 apps.
Documentation
- compodoc - The missing documentation tool for your Angular application.
IoT
Internet of Things
- angular2-iot - Internet of Things directives for Angular 2 (Led, Button, etc.).
- @manekinekko/angular-web-bluetooth - The missing Web Bluetooth module for Angular (>=2).
Product Tour
- ng2-tour - Product Tour.
Performance
Reduce amount of time the user has to wait in order to interact with the app
- @angularclass/idle-preload - Angular 2 Idle Preload for preloading async routes via @AngularClass.
Lazy Load
- ng2-lazyload-image - Lazy image loader for Angular 2.
- ng2-image-lazy-load - Angular2 image lazy loader library.
Integrations
Integrate with services or other frameworks
- angularfire2 - The official Angular 2 library for Firebase.
- ang2-jwt - Helper library for handling JWTs in Angular 2 apps.
- angular2-react-native - Use Angular 2 and React Native to build applications for Android and iOS.
- angular2-meteor - Angular and Meteor - The perfect stack.
- angulartics2 - Vendor-agnostic analytics for Angular2 applications.
- perfectedtech-loopback-sdk-builder - Tool for auto-generating Software Development Kits (SDKs) for LoopBack.
- ng2-alfresco-core - Alfresco Angular 2 components.
- karma-typescript - Simplifying running unit tests with coverage for Typescript projects.
- meteor-rxjs - Exposing Mongo Cursor as RxJS Observable.
- wp-api-angular - Angular (>=2) services for WordPress WP-API(v2) or WP >= 4.7 (natively supports WP-API).
- selfbits-angular2-sdk - Angular 2 SDK for Selfbits Backend-as-a-Service.
- ng2-wp-api - Angular WordPress Module.
- angular2-disqus - A DISQUS integration for Angular2.
- angular2-cloudtasks - Helps using Cloudtasks.io image processing task by substituting your images sources with the processing URL.
- @cloudinary/angular - Cloudinary Angular client library.
- ng2-recaptcha - Angular 2 component for Google reCAPTCHA.
- angular2-recaptcha - Angular 2 : Typescript component for Google reCaptcha.
- pubnub-angular2 - Official PubNub Angular2.
- ng2-awesome-disqus - Disqus for Angular.
- angular2-esri-loader - An Angular 2 service to help you load ArcGIS API for JavaScript Modules.
- @ngx-universal/state-transfer - State transferring utility for Angular Universal.
Dev Tools
- @compodoc/ngd-cli - View the dependencies tree of you Angular2 application.
- angular-playground - A drop in app module for working on Angular components in isolation (Angular version 2.x and above).
- @ngrx/store-devtools - Developer Tools for @ngrx/store.
- angular2-prettyjson - Angular 2 debug output of objects. Contains a pipe similar to JsonPipe but adds support for spacing and handling of circular structures.
- Augury - Angular 2 development tools for Chrome.
- angular-webpack-config - Shared Webpack config for Angular development.
Starter Kit
Boilerplate / scaffold / Yeoman generator / stack ensemble / seed
- @angular/cli - Official CLI tool for Angular.
- test-angular-seed-project - A simple starter Angular2 project.
- poke-try-harder - Extensible Angular 2 Starter using TypeScript (Updated to 2.4.3).
- generator-ng-fullstack - Client, server or fullstack - it's up to you. ng-fullstack gives you the best of the latest: Node, Go, http/2, Angular 1, Angular 2, Express, MongoDB, Gulp, Babel, Typescript and much more.
- generator-angular2 - A Yeoman Generator to create Angular2 apps right now.
- generator-ng2-webpack - An opinionated tool for scaffolding an app using angular2 and webpack.
- generator-modern-web-dev - A Yeoman generator for Modern Web development projects.
- generator-gulp-angular2 - Yeoman generator for Angular2 + Gulp, base on angular2-seed and generator-gulp-angular.
- asaf-test - Get started building an Angular library quickly.
- @manekinekko/angular-library-starter - A Minimalist Starter for Angular (v2+) libraries (w/ AOT support).
- angular2-webpack-starter - An Angular Starter kit featuring Angular 2 and Angular 4 (Router, Http, Forms, Services, Tests, E2E, Dev/Prod, HMR, Async/Lazy Routes, AoT via ngc), Karma, Protractor, Jasmine, Istanbul, TypeScript 2, TsLint, Codelyzer, Hot Module Replacement, @types, and Webpack 2 by @AngularClass.
- angular2-universal-starter - Enjoy Server Side rendering and Web Workers in your Angular2 Application.
- angular-seed - Extensible, reliable and modular starter project for Angular 2 (and beyond) with statically typed build and AoT compilation.
- clarity-seed - This is a repository for a seed project that includes Clarity Design System's dependencies.
- Angular 2 Webpack - A complete, yet simple, starter for Angular 2 using webpack
- Colmena CMS - Free and Open Source API and Admin powered by LoopBack and Angular.
- @ng-seed/universal - Seed project for Angular Universal apps featuring Server-Side Rendering (SSR), Material Design & Flexbox, Webpack, dev/prod modes, DLLs, AoT compilation, HMR, SCSS compilation, lazy loading, @ngrx/store, config, cache, i18n, SEO, angulartics2 and TSLint/codelyzer.