awesome-angular-components

This project is no longer supported.

AngularJS

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


Contents







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
Modals

Display overlay / modal / dialog

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
Menu

Menus / Sidebars

Sticky

Implementations similar to position: sticky

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

Let the user know that something is being loaded

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

Ways to navigate views

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

Audio / Video / PDF

Map
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
Miscellaneous

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
Autocomplete

Autosuggest / autocomplete / typeahead

Select
  • ng2-select - Angular2 based replacement for select boxes
Color Picker
Toggle
Slider
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
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

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

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

Utilities

-

REST API
Framework bindings / integrations
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 Stormpath) - 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

App Size

-

Dev Tools

Inspect
Miscellaneous

Miscellaneous

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

Related Repositories

angular2-education

angular2-education

A list of helpful material to develop using Angular ...

awesome-angular

awesome-angular

:page_facing_up: A curated list of awesome Angular 2 and Angular 4 resources by ...

awesome-angular

awesome-angular

:page_facing_up: A curated list of awesome Angular 2 and Angular 4 resources by ...

awesome-webpack

awesome-webpack

A curated list of awesome Webpack resources, libraries and tools ...

generator-cg-angular

generator-cg-angular

Yeoman generator for Enterprise Angular projects. ...


Top Contributors

Chyngyz