Awesome Angular (v2^) Components Catalog - This project is no longer supported. Please refer to Angular Components

Catalog of Angular components / modules / libraries

• Contributions welcome, see contribution guide

A curated list of helpful material to start learning Angular - Angular 2 Education

Contents

• UI Components
• UI Layout
• UI Animation
• UI Frameworks
• UI Utilites
• Code Design
• Utilities
• Tests
• Performance
• Dev Tools
• Miscellaneous

UI Components

Table / Data Grid

• ng2-table - Simple table extension with sorting, filtering, paging
• ng2-handsontable - Angular 2 directive for Handsontable
• ag-grid - Advanced Data Grid
• ng2-smart-table - Smart data table library with sorting, filtering, pagination & add/edit/delete functions.
• ngx-datatable - A feature-rich yet lightweight data-table crafted for Angular2

Infinite Scroll

• ng2-infinite-list - Angular2 Infinite Scroll Directive
• angular2-infinite-scroll - Infinite Scroll Directive for angular 2

Modals

Display overlay / modal / dialog

• ng2-popup - Angular2 Modal Directive
• angular2-modal - Angular2 Modal / Dialog window
• ng2-bs3-modal - Angular2 Bootstrap3 Modal Component
• ng2-bs4-modal - Angular2 Bootstrap4 Modal Component

Notification

A temporary little modal to notify the user

• @ngrx/notify - Web Notifications Powered by RxJS for Angular 2
• 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.
• 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 - Angular2 Tooltip Directive

Menu

Menus / Sidebars

• ng2-menu - Angular 2 Menu directive

Sticky

Implementations similar to position: sticky

• ng2-sticky - Angular2 “position: sticky” implementation as a directive

Tabs

• ng2-tab - Angular 2 Tab Component

Breadcrumbs

• ng2-breadcrumb - Dynamic breadcrumb trail.

Loading / Progress Indicators

Let the user know that something is being loaded

• ng2-progress-bar - Simple progress bar control for your angular2 applications using bootstrap3.
• angular2-busy - Show busy/loading indicators on any promise, or on any Observable’s subscription.
• ng2-slim-loading-bar - Angular 2 component shows slim loading bar at the top of the page.
• ng2-loading-animate - Loading animation for angular 2
• angular2-circle-progress Simple Angular 2 Circle Progress Component

Carousels

-

Collapse

-

Charts

Displays data in graphs / diagrams

• ng2-charts - Beautiful charts for Angular2 based on Chart.js
• ng2d3 - D3 + Angular2 Composable Re-usable Charting Framework
• ng2-nvd3 - Angular2 component for nvd3
• angular2-chartist - Angular 2 component for Chartist.js
• ngx-charts - Declarative Charting Framework for Angular2 and beyond!

Display a Tree Data Structure

• angular2-tree-component - A simple yet powerful tree component for Angular2
• ng2-tree - Angular2 Tree component

UI Navigation

Ways to navigate views

• ng2-fullpage - Create Beautiful Fullscreen Scrolling websites (now with Angular 2)

Custom Scrollbar

• ng2-slimscroll - Angular2 Customizable Scrollbar Directive
• angular2-perfect-scrollbar - Angular 2 wrapper library for perfect scrollbar

Media

Audio / Video / PDF

• ng2-pdf-viewer - PDF Viewer Component for Angular 2
• Videogular - The HTML5 video player for Angular 2

Map

• ng2-map - Angular2 Google Maps Directives
• angular2-google-maps - Angular 2 components for Google Maps

Dropdown

• ng2-dropdown - Simple dropdown for your angular2 applications using bootstrap3

Display time / date / age

• time-ago-pipe - An Angular 2 pipe for converting a date string into a time ago

Photo / Image Gallery

• ng2-image-gallery - Basic Angular 2 image gallery using Bootstrap 4 and Fontawesome

Social Media / Share Buttons

• ng2-sharebuttons - Simple, lightweight, customizable share buttons with counts

Touch Swipe

• ng2-swipeable-card - A small standalone Angular2 plugin that allows your card component to either swipe left or right.
• angular2-useful-swiper - Use iDangero.us’s great slider Swiper in Angular 2.

Miscellaneous

• ng2-pagination Pagination for Angular2
• ng2-meta - Dynamic meta tags and SEO in Angular2
• angular2-clickoutside-directive - Angular 2 directive that provides Click Outside Functionality
• angular2-fontawesome - Angular2 Components and Directives for Fontawesome
• ng2-safe-img - Very tiny and safe img for Angular 2
• ng2-img-fallback - Load placeholder image on image error
• ng2-translate - An implementation of angular translate for Angular 2.
• angular2-translate - simple translate service solution for Angular 2
• angular-pipes - Angular 2 pipes library
• ng-pipes - Useful pipes for Angular 2+ with no external dependencies!
• angular2localization - An Angular 2 library to translate messages, dates and numbers.
• Chomsky-NG2 - A lightweight Angular 2 i18n wrapper.
• angular2-linky - Angular2 pipe to find links in text input and turn them into html links.
• angular2 embedly - embed.ly directive and service for Angular2
• angular2-highlight-js - highlight.js integration with Angular2.
• ng-dynamic - Dynamic Content Projection in Angular 2+
• angular2-clipboard - A wrapper directive for clipboard.js

Component Collections

• NG2-UI - A collection of quality Angular2 directives
• ng2-ue-utils - Set of angular2 components, directives, pipes and services that will be shared among unified experience SPAs.
• ngx-ui - Style and Component Library for Angular2 and beyond!

Form Components

Let the user enter data

Date / Time picker

• ng2-datetime-picker - Angular2 DateTime Picker
• mydatepicker - Angular 2 date picker - Angular2 reusable UI component
• ng2-datepicker - Angular 2 Datepicker Component
• ng2-date-picker - Highly configurable date picker built for Angular 2

Rich Text Editing

• 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 - Mobile-friendly re-arrangable list element

Drag and Drop

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

Autocomplete

Autosuggest / autocomplete / typeahead

• ng2-auto-complete - Angular2 Auto Complete

Select

• ng2-select - Angular2 based replacement for select boxes

Color Picker

• angular2-color-picker - Angular 2 Color Picker Directive, no dependences required.
• ng2-color-picker - Simple color picker for Angular 2

Toggle

• angular2-feature-toggle - Your module to handle with feature toggles in Angular2 applications easier.

Slider

• ng2-nouislider demos - Angular2 noUiSlider directive

Radio / Checkbox buttons

• 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 - Tag Input component for Angular 2. Blandly inspired by Angular material’s

Masked Input

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

File Upload

• ng2-file-upload - Easy to use Angular2 components for files upload
• fileDroppa - Angular2 File Dropzone
• ngx-uploader - Angular2 File Uploader

Autosize Input / Textarea

-

Image Editing

• angular2-img-cropper - Angular 2 Image Cropper

Markdown / Text Editor

• ng2-ace - A basic ace editor directive for angular 2.
• angular2-froala-wysiwyg - AngularJS2 bindings for Froala WYSIWYG HTML Rich Text Editor.

Form Component Collections

• Angular Formly - JavaScript/JSON powered forms for Angular 2

Miscellaneous

• Ng2 Validators - A List of validators for Angular 2 Forms based on validator.js
• ng2-recaptcha - Angular 2 component for Google reCAPTCHA
• angular2-recaptcha - Angular 2 : Typescript component for Google reCaptcha
• Angular2 Schema Form - Angular2 Schema Form is an Angular2 module allowing you to instanciate an HTML form from a JSON schema.
• 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 - A drag/drop/resize grid-based plugin directive for angular2

UI Animation

Animate transitions

-

Parallax

• ng2-parallax-scroll - Angular2 parallax background scroll directive

UI Frameworks

Mobile Frameworks

• Ionic Framework - Hybrid Mobile App Framework for iOS, Android and Windows.
• onsenui - Hybrid Mobile App UI Framework for iOS and Material Design with Angular and React Components. -

UI Frameworks

• Kendo UI for Angular 2 - A flexible and beautiful UI Components for Angular 2
• PrimeNG - A collection of rich UI components for Angular 2
• Wijmo 5 - The First Complete Collection of Angular 2 Components
• NG-Lightning - Native Angular 2 components & directives for Lightning Design System
• ngSemantic - Angular2 building blocks based on Semantic UI
• Teradata Covalent UI Platform - UI platform built on Angular 2.0 + Material Design
• Fuel-UI - A collection of native Angular 2 components, directives, and pipes for Bootstrap 4.
• novo-elements - UI Repository for Bullhorn’s Novo Theme
• jQWidgets - jQWidgets Angular 2 UI components

Bootstrap

• ng2-bootstrap - Native angular 2 directives for Bootstrap 3
• ngBootstrap - Native angular 2 directives for Bootstrap 4

Material Design

• Angular 2 Material - Angular team’s Material Design components built on top of Angular 2.
• md2 - Angular2 based Material Design components
• angular2-mdl - Angular 2 components, directives and styles based on material design lite
• angular2-materialize - Angular 2 support for Materialize CSS framework 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 - Angular2 Automatic Scroll Detection With Animation
• 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 - RxJS powered state management inspired by Redux for Angular 2 apps - tiny-ng-store - Small Angular 2 store for quick setup - ng2-mobx - MobX connector to Angular 2 - ng2-ui-storage - Provides memory storage fallback for localStorage and sessionStorage - angular2-locker - Wrapper around cookies/sessionStorage/localStorage for angular2. If all are unavailable will use an in memory storage. - angular2-cookie - Implementation of Angular 1.x $cookies service to Angular 2

Form Logic

-

Router

• @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 - Standalone script to turn Angular template into js and put it in a module.

Isomorphic Apps

• Universal Angular 2 - Universal (isomorphic) javascript support for Angular2
• Angular2 Universal Starter Kit - Enjoy Server Side rendering and Web Workers in your Angular2 Application

Boilerplate

Boilerplates / scaffolds / starter kits / generators / stack ensembles

• angular2-webpack-starter - An Angular 2 Starter kit from AngularClass
• angular-seed - High-quality, modular starter (seed) project for Angular 2 apps with statically typed build and AoT
• angular2-webpack - A complete, yet simple, starter for Angular 2 using webpack
• angular2-seed - Angular 2 seed project from Angular team.
• 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 - Angular2 & Rollup.js including AoT and Universal support

Miscellaneous

• angular-oauth2 - AngularJS OAuth2
• ng2-ui-auth - An angular2 repository for authentication based on angular1’s satellizer

Utilities

-

REST API

• ng2-rest-api - Rest API provider for angular 2.
• angular2-jsonapi - A lightweight Angular 2 adapter for JSON API
• ng2-restangular - Restangular for Angular 2
• ng2-resource-rest - Resource (REST) Client for Angular 2

Framework bindings / integrations

• angularfire2 - The official Angular 2 library for Firebase
• angular2-odata - OData service for Angular2

Integrations with Third Party Services

• angulartics2 - Web analytics for Angular 2 applications
• ng2-wp-api - Angular2 WordPress Module
• angular2-apollo - Angular 2 integration for the Apollo Client
• ng2-cloudinary - Angular2 components for Cloudinary image back-end
• angular2-disqus - A DISQUS integration for Angular2
• ng2-disqus - Angular 2 component for Disqus
• pubnub-angular2 - Pubnub Angular2 service is a wrapper for PubNub JavaScript SDK version 4
• selfbits-angular2-sdk - Angular 2 SDK for Selfbits Backend-as-a-Service
• stormpath-sdk-angular - Angular 2 Components for integrating with Stormpath’s API
• 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 - Angular2 image lazy loader library
• angular2-imagelazyload-directive - Angular2 image lazy load directive

App Size

-

Dev Tools

Inspect

• @ngrx/store-devtools - Devtools for @ngrx/store
• @ngrx/store-log-monitor - Port of redux-devtools-log-monitor for Angular 2 and @ngrx/store-devtools
• angular2-logger - A log4j inspired logger for angular 2.
• ng2-logger - Angular 2 logger service

Miscellaneous

• @ngrx/effects - Side effect model for @ngrx/store

Miscellaneous

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