This project is no longer supported.


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

Catalog of Angular components / modules / libraries

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


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

Display overlay / modal / dialog


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.

Menus / Sidebars


Implementations similar to position: sticky

  • ng2-sticky - Angular2 “position: sticky” implementation as a directive
  • ng2-tab - Angular 2 Tab Component
Loading / Progress Indicators

Let the user know that something is being loaded






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
UI Navigation

Ways to navigate views

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

Audio / Video / PDF

  • 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

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
Rich Text Editing
Sortable List

Let the user define an order on a list

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

Autosuggest / autocomplete / typeahead

  • ng2-select - Angular2 based replacement for select boxes
Color Picker
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
Autosize Input / Textarea


Image Editing
Markdown / Text Editor
Form Component Collections
  • 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



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
Material Design

UI Utilites


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


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

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



Framework bindings / integrations
Integrations with Third Party Services








Lazy Load

App Size


Dev Tools



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

Related Repositories



Catalog of Angular 2+ Components & Libraries ...



This project is no longer supported. ...

Top Contributors