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
  • Menu
  • Loading / Progress Indicators
  • Table
  • Tree
  • Time
  • Charts
  • Map
  • Infinite Scroll
  • Audio / Video
  • SVG
  • PDF
  • Form - Select - Autocomplete - Date Picker - Drag and Drop - Masked Input - Calendar - Rich Text Editor - File Upload - Autosize Input / Textarea - Image Editing
• UI Layout
• UI Frameworks
  • Responsive
  • Mobile
  • Component Collections
• Code Structure
  • Data Management
• Code Style
• Utilities
  • Pipes
  • Meta Tags
  • Persistence
  • Scroll
  • Validation
  • API
  • Authentication
  • Responsive Design
  • Event Handling
  • i18n
  • Pagination
  • Angular 1 -> Anuglar 2 Migration
  • Asset management
  • Form
  • Cookie
  • Logging
  • Documentation
  • Miscellaneous
• Performance
  • Lazy Load
• Integrations
• Starter Kit

UI Components

Overlay

Display 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.
• toastr-ng2 - Angular 2 toastr.

Popover

Show a little dialog next to an element

• angular-confirmation-popover - Displays a bootstrap confirmation popover (with no jQuery or bootstrap JS!).

Menu

Menu / sidebar

• ng-sidebar - Angular 2+ sidebar component.

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.

Table

Table / Data Grid — Display (large) datasets

• angular2-data-table - 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.

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.

Time

Display time / date / age

• angular2-moment - Moment.js pipes for Angular2.

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.

Infinite Scroll

• angular2-infinite-scroll - Infinite Scroll Directive for angular 2.

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.

PDF

• ng2-pdf-viewer - PDF Viewer Component for Angular 2.

Form

Let the user create & edit data

Select

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

Date Picker

Time Picker / Datetime Picker

• ng2-datepicker - Angular2 Datepicker Component.
• mydatepicker - Angular2 date picker.
• ng2-datetime - Datetime picker plugins wrapper for Angular2.

Drag and Drop

• ng2-dragula - Simple drag and drop with dragula.
• ng2-dnd-loudandwicked - Angular 2 Drag-and-Drop without dependencies.

Masked Input

• angular2-text-mask2 - Input mask for React, Angular, Ember, Vue, & plain JavaScript.

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.

Rich Text Editor

• ng2-ckeditor-codemirror - Angular2 CKEditor component.

File Upload

• ng2-file-upload - Easy to use Angular2 components for files upload.
• ng2-uploader-rc6fix - Angular File Uploader.

Autosize Input / Textarea

• angular2-autosize - Angular2-autosize is an Angular2 directive that automatically adjusts textarea height to fit content.

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.

UI Frameworks

Responsive

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

Mobile

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

Component Collections

• primeng - UI Components for Angular 2.
• ng-lightning - Native Angular 2 components & directives for Lightning Design System.
• angular2-mdl-miracle - 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.

Code Structure

Improve overall design of the source code

Data Management

Data flow / data store / data flow

• wfw-ng2-redux - Angular 2 bindings for Redux.
• @ngrx/store - RxJS powered state management for Angular applications, inspired by Redux.

Code Style

Improve readability of the source code

• codelyzer-cli - 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!).

Meta Tags

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

Persistence

• angular2-localstorage - Angular2 decorator to save and restore variables/class properties to HTML5 LocalStorage automatically.
• ng2-webstorage - Localstorage and sessionstorage manager - angular2 service.

Scroll

• ng2-page-scroll - Animated scrolling functionality written in pure angular2.

Validation

• ng-validators - A List of validators for Angular 2+ Forms based on validator.js.
• ng2-validation - Angular2 validation.

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.

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.

Responsive Design

• responsive-directives-angular2 - Superset of RESPONSIVE DIRECTIVES to show or hide items according to the size of the device screen and another features in Angular 2.

Event Handling

• ng-click-outside - Angular 2+ directive for handling click events outside of an element.

i18n

Internationalization / L10n / localization / translation

• ng2-translate - The internationalization (i18n) library for Angular 2+.
• angular2localization - An Angular 2 library to translate messages, dates and numbers.

Pagination

• ng2-pagination - Pagination for Angular.

Angular 1 -> Anuglar 2 Migration

• ng-metadata - Angular 2 decorators and utils for Angular 1.x.
• angular2-now - Angular 2 @Component syntax for Angular 1 apps.

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.

Form

Utilities to help create HTML forms

• angular2-schema-form - Angular2 Schema Form (DISCLAIMER: it is not related to angular-schema-form).

Cookie

Cookie manipulation

• angular2-cookie - Implementation of Angular 1.x $cookies service to Angular 2.

Logging

• angular2-logger - A log4j inspired logger for angular 2.

Documentation

• compodoc - The missing documentation tool for your Angular application.

Miscellaneous

Uncommon use cases

• angular2-iot - Internet of Things directives for Angular 2 (Led, Button, etc.).

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.

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.

Starter Kit

Boilerplate / scaffold / Yeoman generator / stack ensemble / seed

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