Awesome Angular 
This is the original Awesome list of the Angular2 framework, today
known as just Angular. This repository
contains intriguing libraries and repos in the Angular ecosystem for
both inexperienced and seasoned developers.
Current Angular version:
Table of contents:
Angular
Angular is a development platform for building mobile and desktop web
applications.
Official Resources
List of Angular experts you should follow on Twitter (in no
particular order). This list is by no means complete.
Blogs
Server-Side Rendering
Material Design
Cheatsheet
Testing
Angular CLI
Webpack
YouTube Channels
Style Guides
Books
On-Site Training
Online Training
Integrations
- GraphQL +
Angular - Caching GraphQL client for Angular and every GraphQL
server
- ckeditor5-angular
- An official CKEditor 5 rich text editor component for Angular 2+
- ckeditor4-angular
- An official CKEditor 4 rich text editor component for Angular 2+
- TailwindCSS +
Angular - Integrate Angular app with Tailwind
- Sentry
- Sentry is a developer-first error tracking and performance monitoring
platform.
- Stencil - Stencil
can generate Angular component wrappers for your web components. This
can improve Angular performance.
- GoodData
- Integrate GoodData Visualizations into your Angular application.
- DataDog
- With the Datadog Angular integration, you can resolve performance
issues quickly.
- Elastic
- Real User Monitoring JavaScript agent with Angular applications.
- HyperFormula
- HyperFormula is a headless spreadsheet built in TypeScript, serving as
both a parser and evaluator of spreadsheet formulas. It can be
integrated into your browser.
- Strich
- STRICH is a JavaScript library for real-time, multi-format barcode
scanning directly in the web browser.
- Pega
- Angular SDK includes a bridge and DX components that connect the
ConstellationJS Engine to an Angular-based design system.
- Genesis
Foundation - Genesis is a low-code platform designed specifically
for the financial markets.
- ngx-google-analytics
- A simple Google analytics integration for Angular apps.
- cloudinary
- Angular SDK from Cloudinary.
Site Templates
- ngx-admin -
Customizable admin dashboard template based on Angular 10+
- ng-matero -
Angular Material admin dashboard template.
- coreui-free-angular-admin-template
- CoreUI Angular is free Angular 17 admin template based on Bootstrap
5
- sakai-ng - Free
Angular Admin Template by PrimeNG
- angular-template-for-threejs
- Angular Template For Three.js
- lemon-mart -
Angular Template App with a Router-first architecture
- devextreme-angular-template
- Responsive Application Layout Templates based on DevExtreme Angular
Components
- QuickApp - ASP.NET
Core / Angular startup project template with complete login, user and
role management. Plus other useful services for Quick Application
Development.
- angular-template-for-threejs
- Angular Template For Three.js
- material-pro-angular-lite
- MaterialPro Angular Lite is high quality free angular material
template / theme from WrapPixel. You can download and use for Personal
as well as Commercial Projects.
- Angular-V17-Template
- A template designed for Angular 17 that emphasizes clean code
practices and test-friendly development.
- angular-quickstart
- A bare-bones Angular template to get you deployed to Netlify
fast!
- sap-fiori-templates
- SAP BTP & Fiori App templates implemented with third-party
frontend frameworks such as React, Vue, and Angular.
- template-angular
- Phaser 3 TypeScript project template that uses the Angular framework
and Vite for bundling.
- angular-nest -
Simple web app template with Angular v17 + NestJS v9 +
ng-openapi-gen.
- gradient-able-free-admin-template
- Gradient able free bootstrap, angular, react admin template
- angular-ngrx-frontend
- Angular NgRx powered frontend template for Symfony (or similar)
backend.
Generators
- Node.js
- Slush
- Yeoman
- ngX-Rocket: Extensible Angular 4+ enterprise-grade generator and
tools
- Scaffold
- ScaffoldHub.io: Generate full
Angular Material applications with MongoDB, SQL or Firebase Firestore
databases.
- Spring Boot
- Bootify.io: Generate Spring Boot
apps with custom database, Angular frontend and CRUD functionality
- JHipster: Open source app
generator for Spring Boot and Angular
- Storybook- The
UI development environment you’ll love to use
- Compodoc - The
missing documentation tool for your Angular application
- ng-doc - The
documentation engine for Angular projects
- StackBlitz - Instant Dev
Environments
- CodeSandbox -
An online IDE and prototyping tool for rapid Angular development.
- Bugfender -
A cloud service to collect logs and Angular errors in Real-Time.
- Angular Dev Tools -
Angular DevTools is a Chrome extension that provides debugging and
profiling capabilities for Angular applications.
- Scuri
Code - A VS Code extention that will generate and maintain seeds for
your unit tests.
- Redux
DevTools - Can be used in combination with @ngrx/store-devtools to inspect
the state of your NgRx app.
- Ionic VS
Code Extension - Perform various functions that are common to
developing an Ionic app, all without leaving your VS Code window.
- Angular
Schematics - Ultimate code generation in Visual Studio Code.
- Angular
17 Snippets - 258 Angular Snippets (TypeScript, Html, Angular
Material, Flex Layout, NgRx, RxJS, PWA & Testing)
Schematics
- Cypress:
Add Cypress to an Angular CLI application
- Jest:
Configure Angular to execute unit tests with Jest instead of Karma +
Jasmine
- Prettier: Add
Prettier and a pre-commit hook for formatting staged files in an Angular
application
- Tailwind CSS: Add
Tailwind CSS to an Angular application
- Threejs:
New three.js starter app
Third Party Components
Animations
Calendars
Charts
- ng2-charts
Beautiful charts for Angular2 based on Chart.js
- ngx-charts -
Declarative Charting Framework for Angular2 and beyond!
- ng-apexcharts -
Angular wrapper for ApexCharts to build interactive visualizations in
Angular 7+.
- ng-chartist -
Angular component for Chartist.js
- org-chart -
Highly customizable org chart. Integrations available for Angular,
React, and Vue.
- ag-charts
- Fully-featured and highly customizable JavaScript charting
library.
- systelab-charts -
Systelab Angular Chart services
- ngx-gantt - A
modern and powerful gantt chart component for Angular
- carbon-charts
- Carbon Charts Angular is a thin Angular wrapper around the vanilla
JavaScript @carbon/charts component library.
Drag/Drop
- ng2-dragula -
Drag and Drop so simple it hurts!
- ngx-drag-drop -
Angular directives using the native HTML Drag And Drop API
- ngx-dropzone -
The missing file input component for Angular Material.
- ng-dnd - Drag and
Drop for Angular
- ngx-file-drag-drop
- Angular material file input component which lets the user drag and
drop files, or select files with the native file picker.
- angular
cdk - The @angular/cdk/drag-drop module
provides you with a way to easily and declaratively create drag-and-drop
interfaces.
Editor Components
File Upload
- ng2-file-upload
Easy to use file upload directives
- ngx-awesome-uploader
Angular Library for uploading files. It supports: File Upload and
Preview (additionally preview images with lightbox), validation, image
cropper , drag and drop with multi language support.
- ngx-flow -
Angular7+ wrapper for flow.js for file
upload
Icons
- angular2-fontawesome
- Angular2 Components and Directives for FontAwesome.
- ng2-fontawesome- A
small directive making font awesome even easier to use.
- ngx-icon-blur -
An Angular component that can be used to create a frosted glass effect
for icons.
- ng-icons - The
ultimate icon library for Angular.
- primeicons -
PrimeIcons is the default icon library of PrimeNG with over 250 open
source icons developed by PrimeTek.
- angular-svg-icon -
Angular component and service for inlining SVGs allowing them to be
easily styled with CSS.
Keyboard Mouse
Layout Components
- @robingenz/ngx-infinite-scroll
Simple Angular directive for infinite scrolling.
- angular-fullpage
Official component for fullPage.js, a fullscreen scrolling library.
- angular-split
Angular split component
- ngx-infinite-scroll
- Infinite Scroll Directive for Angular
- egjs-infinitegrid
- Arrange infinite card elements according to various layout types like
masonry for Angular.
- ngx-scrolltop -
Lightweight, Material Design inspired button for
scroll-to-top of the page. 🔼 No dependencies. Pure
Angular! (Compatibility: Angular 9, Ivy, Universal,
ng add)
Loaders
Maps
Notifications
- ngx-sweetalert2
- Declarative, reactive, and template-driven SweetAlert2 integration for
Angular.
- ngx-toastr -
Notifications/Toastr
- hot-toast -
Smoking hot toast notifications for Angular.
- ngx-sonner - An
opinionated toast component for Angular. A port of @emilkowalski’s
sonner.
- ngx-awesome-popup
- Angular dialog modal framework (Confirmation box, Alert box, Toast
notification and Cookie banner).
- angular-bootstrap-toast-service
- Angular project for sending Bootstrap based toast notifications
including Vercel deployment.
- angular2-notifications
- A light and easy to use notifications library for Angular.
State Management
- angular2-jwt -
Library for sending authenticated HTTP requests and decoding JWTs
- universal-model-angular
- Store and state management for Angular
- ng-http-caching
- Cache for HTTP requests in Angular application.
- akita - A Reactive
State Management Tailored-Made for JS Applications
- ng-simple-state
- Simple state management in Angular with only Services and RxJS.
- exome - Simple
proxy based state manager for deeply nested states, works with Angular
Signals and RxJS.
- ngxs - NGXS tries to
make things as simple and accessible as possible with less boilerplate
and code to maintain.
- ngrx - Reactive State
for Angular
- rx-angular -
RxAngular offers a toolkit for handling fully reactive apps with the
main focus on runtime performance, template rendering, and developer
experience.
- query - Powerful
asynchronous state management, server-state utilities and data fetching
for the web.
- elf - A reactive
immutable state management solution built on top of RxJS. It uses custom
RxJS operators to query the state and pure functions to update it.
- state-adapt
- Declarative, incremental state management library
Tables
- ag-grid - The best JavaScript
Data Table for building Enterprise Applications. Supports React,
Angular, Vue and Plain JavaScript.
- ignite-ui-angular’s
grid - The data grid, tree grid, hierarchical grid in Ignite UI for
Angular provide excel-style filtering, live-data, sorting, draggable
row and other toolbar.
- sheetjs
- SheetJS is a JavaScript library for reading and writing data from
spreadsheets.
- ngx-easy-table
- The Easiest Angular Table. 12kb gzipped! Tree-shakeable. 55 features
and growing!
- active-table
- Framework agnostic table component for editable data experience.
- jsgrids - A
comparison tool to compare JavaScript data grid and spreadsheet
libraries. Find even more libraries here.
UI Libraries
General
- Dev
Extreme - Feature-Complete 65+ Angular Component Suite
- Syncfusion -
The Complete Angular Components Library.
- Nebular -
Customizable Angular UI Library based on Eva Design System
- NG ZORRO
MOBILE - An enterprise-class mobile UI components based on Ant
Design Mobile and Angular.
- NG ZORRO -
An enterprise-class UI components based on Ant Design and Angular.
- ngx-ui - Style and
Component Library for Angular2 and beyond!
- prime-ng - The
Most Complete Angular UI Component Library
- Wijmo 5 - Set of UI
components for Angular2
- Taiga UI - powerful set of open
source components for Angular!
- AgnosUI -
Highly configurable headless framework agnostic component library
Material Based
Bootstrap Based
Tailwind CSS Based
- Flowbite -
Open-source UI components built with Tailwind CSS with support for
Angular.
- David UI
Angular - Components library for enterprise-level projects based on
Tailwind CSS and Angular.
UX Components
- angular-shepherd
- Angular 7 Service wrapping the site tour library Shepherd
- Zoom Image
Library - A little yet powerful framework agnostic headless-library
to zoom image on the web
- skyux - SKY UX
components for Angular
- ngx-ui-tour -
ngx-ui-tour is a UI tour library inspired by angular-ui-tour.
Viewers
Misc Components
- @davidlj95/ngx-meta - Set
your Angular site’s metadata: standard meta tags, Open Graph, Twitter
Cards, JSON-LD, … Supports SSR (and Angular Universal). Use a service.
Use routes’ data. Set it up in a flash! 🚀
- ng2-adsense -
Easy AdSense for Angular Applications
- ngx-countdown
- Simple, easy and performance countdown for angular
- @ngneat/transloco - 🚀 😍 The
internationalization (i18n) library for Angular
- @tolgee/ngx -
Web-based localization tool enabling users to translate directly in the
Angular app they develop.
- xng-breadcrumb -
Zero config breadcrumb solutuon. A lightweight, configurable and
reactive breadcrumbs for Angular 6 and beyond.
- ng-let -
Structural directive for sharing data as local variable into html
component template.
- ng-for-track-by-property
- Angular global trackBy property directive with strict type
checking.
- ng-portal
Component property connection in Angular application.
- ng-lock Angular
decorator for lock a function and user interface while a task
running.
- ng-generic-pipe
Generic pipe for Angular application.
JAM Stack
- scully - Scully is
a static site generator for Angular projects looking to embrace the
Jamstack.
Universal Angular 2
Universal (isomorphic) javascript support for Angular 2
Universal Courses And
Tutorials
Universal General Resources
Universal Seed Projects
- universal-starter
- Angular 2 Universal starter kit by @Angular-Class
- ng-seed/universal
- Seed project for Angular Universal apps featuring Server-Side
Rendering (SSR), Webpack, dev/prod modes, DLLs, AoT compilation, HMR,
SCSS compilation, lazy loading, config, cache, i18n, SEO, and
TSLint/codelyzer by @fulls1z3
- angular-universal
- Fast, Unopinionated, Minimalist starter kit for Angular Universal 100%
powered by Angular CLI
angular-universal-heroku-starter
- Angular 7 Universal Starter Kit with Server-Side Rendering (SSR) and
easy deployment to Heroku
Angular 2 in TypeScript
TypeScript lets you write JavaScript the way you really want to.
TypeScript is a typed superset of JavaScript that compiles to plain
JavaScript.
TypeScript General Resources
TypeScript Seed Projects
- Angular Seed
Seed project for Angular apps
- ng2-play A
minimal Angular2 playground using TypeScript and SystemJS loader
- Angular Lab
A simple Angular 2+ setup using Angular
CLI, TypeScript, Angular Flex Layout,
Material 2, AOT,
and unit and e2e tests on Travis CI
and Saucelabs.
- Angular 2
Samples Angular 2.0 sample components
- Todo app
with Firebase, OAuth, and Immutable
- Spring
Boot and Angular2 tutorial Angular2 practical example based on Rails tutorial.
- Angular
2 Goldilocks seed - A seed project for Angular 2 and TypeScript that
is not too simple, yet not too complex. In fact it’s just right!
- Angular
2 Starter - Simple Angular 2 Starter with Gulp workflow and Travis
CI
- Angular
2 Leaflet Starter - A map application starter based on Angular 2 and
Leaflet
- Angular
2 MapboxGL Starter - Another map application starter based on
Angular 2 and MapboxGL JS
- Angular
2 reconnecting websockets quickstart - Simple counter using 2-way or
1-way reconnecting websockets communication
- ng2-start - Minimal
setup to start creating an angular2 application
- ng-kitchen-sink
- The ultimate Angular 2 bootstrap single page app - touches on all key
and advanced aspects of Angular
- ng-skeleton -
The ultimate Angular seed with ngrx, bootstrap and two factor auth
- angular2-demo
Minimal Angular2 Demo using TypeScript / Sass / Npm Tasks
- Angular
2 Dashboard Starter - Ready to use dashboard control panel seed
project based on Angular 2 and AdminLTE bootstrap theme.
- ngx-admin - Admin
template based on Nebular framework (Angular 4+, Bootstrap 4+)
- Angular 2
full code coverage - Solid tested SystemJS and gulp workflow ready
for your code using Angular2 final release (2.1.0) .. Demonstrates unit
and full code coverage
- Angular 2
webpack - Tour of Heroes official typescript tutorial built with
webpack
- ng2-boiler - A
bare-bones simple starter with Angular2, TypeScript and Webpack
configured.
- Angular
Webpack Starter - Angular Webpack Starter with AoT compilation,
Lazy-loading, and Tree-shaking
- Reaper - Angular 2
Webpack Starter Boilerplate w/o 2269 dependencies
- famn - Angular 2 +
FeathersJS application framework for both client and server side
- Angular
NPM Module Seed - Starting point for developing Angular modules and
publishing them on NPM.
- Angular2 D3v4
Seed - Angular2 D3v4 implementation of charts, graphs, area and view
porting seed project
- ng-seed/spa - Seed
project for Angular apps featuring Webpack, dev/prod modes, DLLs, AoT
compilation, HMR, SCSS compilation, lazy loading, config, cache, i18n,
SEO, and TSLint/codelyzer by @fulls1z3
- Reboard - Angular
4 + Material 2 starter dashboard with ngx-charts, based on
generator-ngx-rocket (Typescript, SASS, Webpack, Jasmine+Karma,
Protractor, TSLint, Codelyzer, Stylelint, ngx-translate, Lodash, Angular
Flex-Layout)
- Angular5 +
Redux + Graphql + MySQL quickstart - Simple Fullstack GraphQL
Application with Angular CLI + Redux + Express + GraphQL + Sequelize
(supports MySQL, Postgres, Sqlite and MSSQL).
- Angular5 +
Firebase + Structure - Angular 5 + Firebase + a very good
router/module structure to make it your own so easy
- angular-app-example
- Angular latest + material + sass themes + more beautiful features, a
dashboard app example
- NG-MATERO -
This Ng-Matero is an Angular admin templete made with Material
componnets.
- TinkoffCreditSystems/angular-open-source-starter
- a starter project for creating open-source libraries for Angular
- truonghungit/angular-starter
- 😍 A complete Angular 10, NgRx, Angular CLI & Angular Material
starter project
- Eoapi - A
lightweight, extensible API tool based on Angular and Electron
- {{
add_your_repo }}
Ionic in Angular
Ionic is the beautiful, open source front-end SDK for developing
hybrid mobile apps with web technologies.
Ionic General Resources
- Ionic Academy - The fastest
way to learn Ionic.
- Elite Ionic - Advanced
training for Angular developers who want to create NEXT LEVEL native web
applications.
- Ionic Themes -
Tutorials and templates.
- Ionic Start - Build web and
native mobile applications with Ionic whilst learning modern reactive
development with Angular
Angular 2 in Dart
Dart is an open-source, scalable programming language, with robust
libraries and runtimes, for building web, server, and mobile apps.
Dart General Resources
Angular 2 in Traceur
Traceur is a JavaScript.next-to-JavaScript-of-today compiler.
Traceur General Resources
Traceur Seed Projects
Angular 2 in ES5
An ECMAScript language that includes structured, dynamic, functional,
and prototype-based features.
ES5 General Resources
ES5 Seed Projects
angular2-es5-starter-kit
Angular2 ES5 Starter Kit
Meteor in Angular 2
Build Realtime Web and Mobile Apps With Angular and Meteor.
Meteor General Resources
Meteor Seed Projects
Angular 2 in NativeScript
Build truly native iOS, Android and Windows Phone apps with
Javascript and CSS. Try NativeScript open-source framework for
cross-platform development.
NativeScript General
Resources
NativeScript Seed Projects
Angular 2 in React Native
React Native enables you to build world-class application experiences
on native platforms using a consistent developer experience based on
JavaScript.
React Native General
Resources
React Native Projects
React Native Seed Projects
Angular 2 in Scala
General purpose language; multiparadigm (object-oriented, functional,
concurrent elements); statically typed, type-safe; focus: Web
services.
Scala General Resources
Scala Seed Projects
Angular 2 components with
Bit
Bit is an open source virtual repository (code base) built to make
components easily manageable and usable across applications. You can
quickly export any Angular component from any context while working on
any project to a bit distributed Scope. Bit’s reusbale component
environment cuts the overhead of configuring build and test environments
for exporting every new component. The Scope is a virtual component
repository which stores, organizes, manages and tests your components.
Once modeled on a Scope, your components can be easily found and used in
any Angular application. Components can be organized together and still
modified and used individually without pulling in entire libraries.
Bit Resources
Security
- Angular.io Security
Guide - brief security guidance including Preventing cross-site
scripting (XSS), Sanitization and Content security policy.
- So you thought you were safe using AngularJS? Think again! Slides,
Video - Lewis
Ardern speaking at OWASP London 2017.
Authentication
- casl-angular
- Module which integrates isomorphic permissions management library CASL with Angular2+
- ngx-auth-firebaseui
- Angular Material UI component for
firebase
authentication
- ngx-permissions
- Permission and roles based access control for your angular(angular 2,
angular 4,5+) applications(AOT, lazy modules compatible)
- angular-auth-oidc-client
- npm package for OpenID Connect, OAuth Code Flow with PKCE, Refresh
tokens, Implicit Flow
- angularx-social-login
- Social login and authentication module for Angular 17
- ms-identity-javascript-angular-tutorial
- A chapterwise tutorial that will take you through the fundamentals of
modern authentication with Microsoft identity platform using MSAL
Angular v2.
- angular2-jwt -
Helper library for handling JWTs in Angular apps
- auth0-angular -
Auth0 SDK for Angular Single Page Applications
- ng-universal -
Angular Universal module for Nest framework (node.js)
- angularfire -
Angular + Firebase
- supabase
- Build a User Management App with Angular.
- fingerprint -
The Fingerprint Angular SDK is an easy way to integrate Fingerprint into
your Angular application.
- amplify - AWS
Amplify streamlines full-stack app development. With its libraries, CLI,
and services, you can easily connect your frontend to the cloud for
authentication, storage, APIs, and more.
NgRx
enjoy — PatrickJS
License
