Arasu378/awesome-angular-components

Catalog of Angular 2+ Components & Libraries

Angular 2+ Components & Libraries

• Official website: devarchy.com/angular-components
• Use devarchy to add a library to the catalog

Contents

• UI Components
  • Overlay
  • Notification
  • Popover
  • Table
  • Tree
  • Loading / Progress Indicators
  • Menu
  • Charts
  • Map
  • Infinite Scroll
  • Parallax
  • Scrollbar
  • Carousel
  • Sticky
  • Context Menu
  • Time
  • Audio / Video
  • SVG
  • Social Sharing
  • PDF
  • Miscellaneous
  • Form
    • Date Picker
    • Color Picker
    • Slider
    • Select
    • Autocomplete
    • Type Select
    • Drag and Drop
    • Sortable List
    • Masked Input
    • Rich Text Editor
    • File Upload
    • Autosize Input / Textarea
    • Calendar
    • Image Editing
• UI Layout
  • Responsive
• UI Frameworks
  • Responsive
  • Component Collections
  • Mobile
  • Admin Panel
• Code Structure
  • Data Management
  • Communication with Server
• Code Style
• Utilities
  • Pipes
  • Form
  • API
  • Authentication
  • Event Handling
  • Scroll
  • Responsive Design
  • Persistence
  • Cookie
  • Routing
  • Pagination
  • Validation
  • i18n
  • Logging
  • Asset management
  • Meta Tags
  • Clipboard
  • Angular 1 -> Angular 2 Migration
  • Documentation
  • Product Tour
• Performance
  • Lazy Load
• 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+.
• ng2-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.

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.

PDF

• 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.

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.
• ng2-drag-drop - Angular 2 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.

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 for 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

• @angular/flex-layout

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.

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

• ng2-admin - Angular 2 admin dashboard framework.

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.
• ng2-mobx - MobX connector to Angular 2.

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.

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.

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.

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.

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.

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.

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

• ng2-meta - Dynamic meta tags and SEO in Angular2.
• ng2-metadata - Dynamic page title & meta tags generator for Angular2.

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.

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.

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.