Angular 2+ Components & Libraries

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

Contents

• UI Components
  • Overlay
  • Notification
  • Popover
  • Table
  • Tree
  • Loading / Progress Indicators
  • Menu
  • Charts
  • Map
  • List Virtualization
  • 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
• Isomorphic Apps
• Code Structure
  • Data Management
  • Communication with Server
• Code Style
• Utilities
  • Pipes
  • Form
  • Animations
  • 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+.
• 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.

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

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