Awsome Angular 2+ list

A curated list of amazingly Angular 2+ components, libraries, resources and shiny things.

Angular

Angular is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop.

Current Angular version

Current Browser support for Angular

Browser support

Official Resources

• GitHub Repo
• Site
• Blog
• Documentation
• Cheatsheet
• Styleguide
• Getting Started Guide
• Resources
• Twitter
• Events

Table of Contents

• Awsome Angular 2+ list
• Angular
  • Current Angular version
  • Current Browser support for Angular
  • Official Resources
• Table of Contents
• Documentation generators
• Boilerplates / Seeds
• Material / CDK
• UI Layout
  • Structure
  • Icons
  • Emoji
• UI Frameworks
  • Responsive
  • Mobile
  • Admin panels
• UI Components
  • Overlay
  • Lightbox
  • Tooltip
  • Breadcrumb
  • Popover
  • Notification
  • Table
  • Tree
  • Loading / Progress Indicators
  • Menu
  • ContextMenu
  • Charts
  • Markdown / Editors
  • Map
  • Audio / Video
  • SVG
  • Virtual scroll
  • Infinite scroll
  • Scrollbar
  • Drag and Drop
  • Counters / Countdown
• Utilities
  • Pipes
  • File upload
  • Authentication / authorization
• Other Libraries

Documentation generators

• compodoc - The missing documentation tool for your Angular application.
• AngularDoc - Architectural analysis and visualization for Angular 2 projects.
• Storybook - Storybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components.

Boilerplates / Seeds

• Angular CLI - CLI tool for Angular.
• ngx-rocket - Angular 9+ starter kit for enterprise-grade projects.
• ng2-play - A minimal Angular2 playground using TypeScript and SystemJS loader.
• ng2-lab - Angular Lab.
• babel-angular2-app - A super-simple skeleton Angular 2 app built with Babel and Browserify.
• angular-starter - An Angular Starter kit featuring Angular (Router, Http, Forms, Services, Tests, E2E, Dev/Prod, HMR, Async/Lazy Routes, AoT via ngc), Karma, Protractor, Jasmine, Istanbul, TypeScript, TsLint, Codelyzer, Hot Module Replacement, @types, and Webpack by @tipeio.
• learn-angular - Learn Angular 4 in Baby Steps.
• angular-seed - Extensible, reliable, modular, PWA ready starter project for Angular (2 and beyond) with statically typed build and AoT compilation.
• angular2-minimalist-starter - Angular2 Minimalist Starter.
• angular-starter - Gulp Angular Starter using TypeScript (Updated to 4.4.3).
• angular2-boilerplate - An Angular 2+ boilerplate on steroids that achieves 100 top score on Google Page Speed.
• angular2-seed - A simple starter project demonstrating the basic concepts of Angular 2.
• @ng-seed/universal - A seed project for Angular Universal apps following the common patterns and best practices in file and application organization.

Material / CDK

• @angular/cdk - Library that helps you author custom UI components with common interaction patterns.
• @angular/material - Material Design UI components for Angular applications.
• Material Guides - Angular Material guides

UI Layout

Structure

• @angular/flex-layout - Provides HTML UI layout for Angular applications; using Flexbox and a Responsive API.
• angular2-grid - A grid-based drag/drop/resize directive plugin for Angular 2.
• angular-split - Angular (2+) UI library to split views.
• ng2-fullpage - Angular 2 fullpage scrolling.
• ngresizable - Simple, tree-shakable, AoT, Universal and Web Worker friendly resizable component for Angular
• ng-golden-layout - Angular bindings for golden-layout ; A multi window layout manager for webapps.
• ng6-golden-layout - Golden-Layout binding for Angular 6
• ngx-masonry - Angular Module for displaying a feed of items in a masonry layout.

Icons

• ng-svg-icon-sprite - Angular 6 package for generating and using inline SVG icons in your project.
• angular-feather - A-la-carte integration of Feather Icons in Angular (2+) applications.
• angular2-fontawesome - Angular5 Components and Directives for Fontawesome.
• ng2-fontawesome - An easy-to-use directive for font awesome icons.

Emoji

• ngx-emoji-mart - Customizable Slack-like emoji picker for Angular .
• ng-emoji-picker - Angular 4 Emoji Picker.
• angular-emojione - EmojiOne for Angular.
• ng2-emojis - An Angular 2 plugin for emojis support for text inputs and textareas.

UI Frameworks

Responsive

• ng2-bootstrap - Native Angular directives for Bootstrap.
• @ng-bootstrap/ng-bootstrap - Angular powered Bootstrap.
• ng-semantic - Angular 2 building blocks package based on Semantic UI.
• ng2-semantic-ui - Semantic UI Angular 2 Integrations -- no JQuery required --.
• angular2-materialize - Angular 2 support for Materialize CSS framework.
• 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.
• @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 for Angular is a dependency-free Angular toolkit for building modern web apps.
• 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.
• 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.
• jQWidgets - Vue, Angular, React, jQuery and ASP .NET Core UI Framework
• Angular MetaMagic EXtensions - Acronym for Angular MetaMagic EXtensions for Inputs & Outputs. It is a rich set of Angular 6 (120+) components powered by HTML5 & CSS3 for Responsive Design and with 50+ Material Design Themes, UI Components, Charts, Gauges, Data Point Widgets, Dashboads.
• src-zone/material - Blox Material makes it possible to create beautiful Angular apps with modular and customizable UI components, designed according to the Material Design Guidelines.
• ng-sq-ui - Flexible and easily customizable UI-kit for Angular 6+
• truly-ui - Truly-UI - WebComponents for Desktop Applications.
• 💰 kendo-ui - Kendo UI for Angular. Professional Grade Angular UI Components.
• 💰 syncfusion-angular-ui - The Complete Angular UI Components Library.
• 💰 wijmo-core - Deliver next-generation HTML5 applications with Wijmo Core, a collection of true JavaScript controls written in TypeScript and built for speed.
• Taiga UI - Taiga UI is fully-treeshakable Angular UI Kit consisting of multiple base libraries and several add-ons.
• Mosaic UI - Mosaic UI Components for Angular.

Mobile

• ionic-framework - A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
• 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.
• ng-zorro-antd-mobile - A configurable Mobile UI components based on Ant Design Mobile and Angular.

Admin panels

• coreui - CoreUI Angular is free Angular 2+ admin template based on Bootstrap 4.
• ngx-admin - Admin template based on Nebular framework (Angular 4+, Bootstrap 4+).
• Material Dashboard Angular 4 - Material Dashboard Angular is a free Material Bootstrap Admin.
• ng-pi-admin - Angular admin.
• ng-dashboard - Angular admin dashboard framework.
• cdk-admin - Angular 6 admin panel using angular material & angular flex.
• PaperAdmin - A flat admin dashboard using Angular 2/4.
• Reboard - Admin dashboard template based on Angular 4+, Angular Material 2 and ngx-charts.
• ng-matero - Ng-Matero is an Angular admin template made with Material components.

UI Components

Overlay

Overlay / modal / popup

• ng2-ui-overlay - General Solution For Angular2 Overlay Elements.
• angular2-modal - Angular2 Modal / Dialog window.
• ng2-bs3-modal - Angular2 Bootstrap3 Modal Component.
• ngx-modal - Open modal window (dialog box) for your angular2 applications using bootstrap3.
• ng2-ui-popup - Angular2 Modal Directive

Lightbox

• ngx-gallery - Angular Gallery, Carousel and Lightbox.
• angular2-lightbox - Lightbox2 port to use with angular2.
• ng2-alert-center - A small angular2 module for centralized application bootstrap alerts.

Tooltip

• ng2-tooltip-directive - Tooltip for Angular
• ng2-ui-tooltip - Angular2 Tooltip Directive
• ngx-tooltip - Simple tooltip control for your angular2 applications using bootstrap3. Does not depend of jquery.
• ngx-popper - An angular wrapper for popper.js, great for tooltips and positioning popping elements

Breadcrumb

• xng-breadcrumb - A lightweight, configurable and reactive breadcrumbs solution for Angular 2+

Popover

• angular-confirmation-popover - Displays a bootstrap confirmation popover (with no jQuery or bootstrap JS!).
• ngx-popover - Simple popover control for your angular2 applications using bootstrap3. Does not depend of jquery.
• popover - Angular Material Popover

Notification

Toaster / snackbar / alert

• ng-snotify - Angular 2+ Notification Center.
• angular2-notifications - A light and easy to use notifications library for Angular 2.
• ng2-notifications - Angular 2 Component for Native Push Notifications.
• @ngrx/notify - Web Notifications Powered by RxJS for Angular.
• angular-notifier - A well designed, fully animated, highly customizable, and easy-to-use notification library for your Angular 2+ application.
• ng-notyf - A dead simple notification library for Angular.
• ng-push - An Angular wrapper around the Notifications API.
• ng2-notify-popup - A simple, lightweight module for displaying notifications in your Angular 4 app.
• 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.
• ngx-toastr - Angular 2 toastr.
• ng2-toastr - Bootstrap style toast for modern Angular.
• ngx-sweetalert2 - Declarative, template-driven SweetAlert2 integration for Angular 4+
• ng-alerts - An alert library for Angular.

Table

Table / Data Grid

• @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.
• angular2-datagrid - Datagrid for angular 2.
• NG2TableView - ng2 table-view with angular material
• ngx-super-table - A feature-rich table component built with angular.

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.
• ngx-treeview - An Angular treeview component with checkbox
• ng.tree - Ng Tree for angular4

Loading / Progress Indicators

• ng4-loading-spinner - Angular 4 custom async loading spinner.
• ngx-spinner - A library for loading spinner for Angular 4/5/6.
• angular2-spinner - Simple loading indicator.
• angular2-busy - Show busy/loading indicators on any promise, or on any Observable's subscription.
• ng-spin-kit - SpinKit ( spinners for Angular 2+.
• ng-circle-progress - A simple circle progress component created for Angular based on SVG Graphics.
• ng2-slim-loading-bar - Angular 2 component shows slim loading bar at the top of the page.
• angular2-ladda - Angular 2 Ladda module.
• ngx-progressbar - Angular progress bar.
• angular-progress-bar - This component allow you to easy incorporate progress-bar to angular/ionic project, providing binding and color options.
• ngx-loading-bar - Automatic page loading / progress bar for Angular.
• angular-svg-round-progressbar - Angular module that uses SVG to create a circular progressbar.
• angular2-loaders-css - Angular 2 module that implements Loaders.css spinners.
• ng-http-loader - Angular http interceptor - intercepts automatically all http requests and shows a spinkit spinner / loader / progress bar.
• ng-block-ui - Block UI For Angular.
• angular-epic-spinners - Reusable angular components for epic-spinners.

Menu

Menu / sidebar / drawer

• ng-sidebar - Angular 2+ sidebar component.
• ngx-aside - Simple angular sidebar panel
• angular-material-sidemenu - A small component to make sidenav menus using Angular Material.
• ng-material-multilevel-menu - Material Multi-Level Menu for Angular Projects .

ContextMenu

• angular2-contextmenu - A context menu built with Angular 2 inspired by ui.bootstrap.contextMenu.
• ngx-contextmenu - An Angular component to show a context menu on an arbitrary component.
• angular-right-click - Angular right click and context menu library. No dependencies.
• ng2-right-click-menu - Right click context menu for Angular 2+.

Charts

• ng2-charts - Beautiful charts for Angular2 based on Chart.js.
• ngx-charts - Declarative Charting Framework for Angular2 and beyond.
• ngx-charts-builder - ngx-charts-builder is a chart builder for ngx-charts!
• angular2-highcharts - Highcharts for your Angular2 project.
• ng2-nvd3 - Angular2 component for nvd3.
• angular-google-charts - An Angular 6 implementation of the Google Charts library.
• 💰 angular-fusioncharts - Angular Component for FusionCharts JavaScript Charting Library.

Markdown / Editors

Markdown / Showdown / Editor / WYSIWYG

• ngx-md - Angular(ngx) directive for parsing markdown content in your web application.
• ngx-markdown - Angular markdown component/directive/pipe/service to parse static, dynamic or remote content to html with syntax highlight.
• ng2-markdown - Angular2 Markdown Web Component.
• ngx-showdown - Angular X Showdown Module.
• ng2-simplemde - angular2 component for Simplemde Markdown Editor.
• covalent-text-editor - Covalent text and markdown editor component for Angular based on SimpleMDE.
• ng2-ace - A basic ace editor directive for angular 2.
• ngx-inline-editor - Native UI Inline-editor Angular (4.0+) component.
• ngx-quill - quill editor with angular and TS.
• ngx-quill-editor - @quilljs editor component for @angular.
• ngx-monaco-editor - Monaco Editor component for Angular 2 and Above.
• covalent-code-editor - Covalent text and code editor component for Angular based on Monaco Editor.
• ngx-wig - Angular(Angular 5, Angular 6) WYSIWYG HTML Rich Text Editor.
• angular2-tinymce - Angular 2 component for TinyMCE MCE WYSIWYG editor.
• angular-simditor - Angular Editor for Simditor.

Map

• angular2-google-maps - Angular 2+ Google Maps Components.
• ng2-map - Angular2 Google Maps Directives.
• angular-maps - Angular Maps (X-Map) is a set of components and services to provide map functionality in angular 2+ apps.
• ng-ui-map - Angular Google Maps Directives.
• angular2-esri4-components - A set of Angular 2 components to work with ArcGIS API for JavaScript v4.1.
• angular-esri-map - A collection of directives to help you use Esri maps and services in your Angular applications.
• angular-cesium - JavaScript library for creating map based web apps using Cesium and Angular.
• angular2-baidu-map - Angular2 component for Baidu map.
• angular2-mapbox - Angular 2 components for mapbox-gl.
• ngx-mapbox-gl - Angular binding of mapbox-gl-js.
• ngx-mapboxgl-starter - A recipe of Angular and MapboxGL.
• ngx-amap - Angular 2+ component for AMap (Gaode map) .
• mangol - Maps created with Angular & OpenLayers using Material design.

Audio / Video

• videogular2 - The HTML5 video player for Angular 2.
• audioScope-ng2 - AudioScope demo written in Angular 2 + TypeScript.
• angular-audio-context - An Angular wrapper for the Web Audio API's AudioContext.
• tone-lab - Playing around with Web Audio and Angular 4.
• ngx-embed-video - Get embed code for embedding youtube/vimeo/dailymotion/* video in websites from URL or ID in Angular 4.
• echoes-player - Echoes Player: the missing Media Player experience for Youtube - Built with Angular.
• ngx-youtube-player - (ngx) A youtube component wrapped with Angular (typescript).
• web - Angular6 music player to search and play YouTube, SoundCloud and Mixcloud tracks .
• alltomp3-app - Desktop application to download YouTube, SoundCloud & Spotify in MP3 with full tags.
• ngx-audio-player - A library for loading playing audio using HTML 5 audio specifically for Angular 7.
• ngx-plyr - Angular 6+ binding for Plyr video & audio player.

SVG

• ng-inline-svg - Angular 2+ directive for inserting an SVG file inline within an element.
• angular-svg-icon - Angular 6+ component for inlining SVGs allowing them to be easily styled with CSS.
• shapeshifter - SVG icon animation tool for Android, iOS, and the web.

Virtual scroll

• od-virtualscroll - Observable-based virtual scroll implementation in Angular .
• ngx-virtual-scroller - Virtual Scroll displays a virtual, "infinite" list.
• ngx-ui-scroll - Infinite/virtual scroll for Angular.
• @angular/cdk/scrolling - CDK scrolling package provides helpers for directives that react to scroll events.

Infinite scroll

• ngx-infinite-scroll - Infinite Scroll Directive for Angular.

Scrollbar

• ngx-perfect-scrollbar - Angular wrapper library for the Perfect Scrollbar.
• ngx-malihu-scrollbar - Angular 2+ scrollbar customization using Malihu jQuery Custom Scrollbar plugin.
• ngx-scrollbar - Custom overlay-scrollbars with native scrolling mechanism for Angular, it also provides a cross-browser smooth scroll directive.

Drag and Drop

• ng2-dragula - Simple drag and drop with dragula.
• ng2-dnd - Angular 2 Drag-and-Drop without dependencies.
• ng-drag-drop - Drag & Drop for Angular - based on HTML5 with no external dependencies.
• ngx-sortablejs - Angular 2+ binding to SortableJS. Previously known as angular-sortablejs.

Counters / Countdown

• ngx-countdown - Simple, easy and performant countdown for angular.

Utilities

Pipes

• angular-pipes - Useful pipes for Angular.
• ngx-pipes - Useful pipes for Angular with no external dependencies!
• ng-pipes - Bunch of useful pipes for Angular2 (with no external dependencies!).

File upload

• ngx-uploader - Angular File Uploader.
• ngx-flow - flow.js file upload for Angular.
• ngx-awesome-uploader - Angular Library for uploading files with many features.
• ngx-file-drop - Angular file and folder drop library.
• ngx-material-file-input - File input for Angular Material form-field.
• ng2-file-upload - Easy to use Angular components for files upload.
• ngx-dropzone-wrapper - Angular wrapper library for Dropzone

Authentication / Authorization

• ngx-auth - Angular 7+ Authentication Module.
• ngx-auth-firebaseui - Angular Material UI component for firebase authentication.
• ngx-permissions - Permission and roles based access control.

Other Libraries

• ng-google-sheets-db - 🚀 Use Google Sheets as your (read-only) backend!
• ngx-flag-picker - 😻 Customizable component which containing a dropdown with country flags
• ng-lock - Angular decorator for locking functions / user interface while task are running