awesome-angular
:page_facing_up: A curated list of awesome Angular resources
https://github.com/PatrickJS/awesome-angular
Last synced: 5 days ago
JSON representation
-
Development Utilities
-
AI
- Official Angular CLI MCP Server Setup
- Official llms.txt file
- Official llms-full.txt file
- AGENT.md - The universal agent configuration file.
- Angular code editor rules - Guide for effective AI interaction patterns when working with Angular code.
- cursor.directory - The home for Cursor enthusiasts.
- angular-material-ai-rules - A collection of configuration rules and usage guidelines for using Angular Material in AI-driven code editors.
- web-codegen-scorer - A tool for evaluating the quality of web code generated by Large Language Models (LLMs).
- ngx-bob - Angular chat widget with messaging, local history, error handling, commands, and search.
- ngx-gen-ui - Lightweight Angular directive and service for streaming generative UI content via Firebase AI.
- agentbridge - A framework that standardizes how AI agents discover, interact with, and control application components.
- Feature Search Agent - Angular PR Scout - An AI-powered agent built with Google's Agent Development Kit (ADK) that automatically searches and analyzes Angular's GitHub pull requests for new features.
- glama - Directory of MCP servers filtered for Angular-related entries.
- superconnect - An AI-powered tool that scans your Figma file, explores your React or Angular repo, generates `.figma.tsx` or `.figma.ts` mappings, and publishes them back via Figma’s CLI.
- Official llms-full.txt file
- CodingFleet - An innovative AI-powered tool that transforms your instructions into efficient Angular code.
- repomix - A tool that packs your entire repository into a single, AI-friendly file.
- angular-skills - A collection of skills that provide coding agents with up-to-date Angular v20+ patterns, best practices, and code examples.
- ngx-agents-md - Add Angular documentation to your project for AI coding agents (Claude Code, Cursor, etc).
- Official Angular Skills
- ngAutoPilot - Agent-agnostic catalog of micro-skills for Angular, TypeScript, JavaScript, RxJS, testing, code quality, architecture, versioning, and quality governance workflows.
- ng-mocks-testing-skill - A collection of Claude Code skills for writing high-quality Angular unit tests with Jest and `ng-mocks`.
- ngx-prompt-kit - Angular components for AI chat interfaces, built on Spartan UI.
- rxjs-mcp-server - Execute, debug, and visualize RxJS streams directly from AI assistants like Claude.
- agentskit - Composable toolkit and headless chat components for building AI agents in Angular, with streaming, tools, memory and RAG.
- @Kobolden/angular-skills - Enhance your Angular development with skills for AI-assisted coding, featuring up-to-date patterns, best practices, and examples for version 20+.
- Threadplane - Angular-native agent UI framework: streaming chat, durable threads, interrupts, subagents, planning, memory, and generative UI for LangGraph and AG-UI backends.
- Angularize - Vibe code your Angular app with a human coder in your corner.
- mushi-mushi - Fix your AI-built app instantly with plain-English diagnoses and ready-to-use fixes directly in your editor.
- ngx-ai-devtools - See every prompt, response, token, and dollar your app spends without leaving the browser tab.
- reangular - A coding-agent skill that converts a React library into a modern Angular library with full feature parity, automated browser validation, and a side-by-side parity review.
- angular-vibe-kit - Bootstrap a vibe coding workflow into any Angular project—complete with a `CLAUDE.md`, project docs, and Claude Code slash-commands tailored to your Angular version.
- ngx-testbox-agent-skill - AI Agent skill for the `ngx-testbox` testing package.
- point-grab - Point at any web app element to instantly send its full context—HTML, component name, source file, and ancestors—to your AI agent via MCP.
- senior-angular-architect - An expert AI skill for senior-level Angular architecture guidance.
-
Analytics
- ngx-tableau - A module that allows you to embed a Tableau report in an Angular webapp.
- ngx-matomo-client - Matomo analytics client for Angular applications.
- angulartics2 - Vendor-agnostic analytics for Angular2 applications.
- angular-google-tag-manager - A service library for integrate google tag manager in your Angular project.
- litlyx - An open-source analytics tool — set up with one line of code.
- plausible - Lightweight, open‑source, privacy‑friendly analytics with SPA support—see [SPA support](https://plausible.io/docs/spa-support).
- @blue-cardinal/ngx-google-analytics - Angular module for injecting Google Analytics script, with safeguards to prevent use in dev environments.
- oculr-ngx - An analytics library that makes collecting data in an Angular app simple.
- ngx-clarity - A useful Angular library that automatically injects the script tag required to use [Microsoft Clarity](https://clarity.microsoft.com/).
- ngx-piwik-pro - A dedicated [Piwik PRO](https://piwik.pro/) Angular library for implementing Tag Manager and tracking.
- ngx-material-tracking - Provides GDPR-compliant tracking for Angular sites with built-in Google Analytics, Meta Pixel, and custom options.
- ngx-segment-analytics - Provides an API for [Segment](https://github.com/segmentio/analytics-next/).
- ngx-meta-pixel - This package enables you to setup [Meta Pixel](https://www.facebook.com/business/tools/meta-pixel) for your Angular application.
- clickstream-analytics-on-aws-web-sdk - Enables collection of browser clickstream data to AWS via the provided data pipeline.
- @luzmo/ngx-embed - A library for embedding [Luzmo](https://www.luzmo.com/) dashboards in your Angular application.
- opentelemetry-angular-interceptor - A library to deploy [OpenTelemetry](https://opentelemetry.io/) in your Angular application.
- ng-webdatarocks - This repository contains the source code of the Angular wrapper for [WebDataRocks](https://www.webdatarocks.com/). Follow this [example](https://github.com/WebDataRocks/pivot-angular) to integrate the WebDataRocks web reporting tool.
- ngx-amplitude - An Angular 18+ library for easy integration of [Amplitude](https://amplitude.com/) analytics, with global init and event logging service.
- rybbit - A privacy-friendly alternative to Google Analytics; see this [guide](https://www.rybbit.io/docs/guides/angular) for Angular integration.
- ngx-gtm - Angular library that automatically injects the script tag required to use Google Tag Manager (GTM).
- Heap - Product analytics for tracking customer journeys, conversion, and retention.
- Heap - Product analytics for tracking customer journeys, conversion, and retention.
- ngx-segment-community - The community-maintained successor to [ngx-segment-analytics](https://github.com/opendecide/ngx-segment-analytics).
- swetrix - [Integrate Swetrix with your Angular application](https://swetrix.com/docs/angular-integration) to track page views, monitor errors, and capture custom events — all while staying privacy-friendly and GDPR-compliant.
- kitbase - A developer platform for product analytics and feature management.
- @grandgular/logrocket-angular - Wrapper for the LogRocket Web SDK with DI‑friendly init, lazy loading, typed options, privacy helpers, and DOM directives for data‑private/data‑public.
- gizmo - An AI native alternative to Google Analytics, with a more generous free tier than competitors.
- ngx-umami - Angular integration for [Umami Analytics](https://umami.is/) — a lightweight, privacy‑first tracking solution tailored for Angular applications.
- takt-angular - Idiomatic Angular wrapper for [Takt](https://github.com/vskstudio/takt-core) privacy-friendly analytics.
- gizmo - An AI native alternative to Google Analytics, with a more generous free tier than competitors.
- inspect-ng-collector - A comprehensive front-end telemetry and monitoring library for Angular applications.
-
Code Analysis
- ng-parsel - Parse your Angular codebase to JSON abstraction - Great for displaying APIs and analysis.
- angular-compiler-output - See the JS output of the Angular compiler for a given Angular template.
- ng-lens - A Node.js tool that uses `ts-morph` to analyze Angular components and detect service usage patterns from any API library.
- compuse - Unified API for analyzing Angular component usage across your codebase.
- ngx-genie - A tool to visualize the dependency injection tree, analyze service states, track component relationships, and identify memory or architectural issues.
- ngx-html-bridge - Converts Angular templates into static HTML variants, enabling reliable validation and linting with any standard HTML tool.
- ng-di-graph - A command-line tool that analyzes Angular TypeScript codebases to extract dependency injection relationships.
- ngx-locator - Angular development utility to open components and templates from the browser like [LocatorJS](https://www.locatorjs.com/).
- angular-doctor - Scans your project for Angular-specific lint issues and dead code, then produces a 0–100 health score plus actionable diagnostics.
- angular-mermaider - Static code analyzer that produces Mermaid dataflow diagrams.
- oxc-angular-compiler - A high-performance Angular template compiler written in Rust, leveraging the [Oxc](https://github.com/oxc-project/oxc) infrastructure for blazing-fast compilation.
- modulens - A suite of architecture, structure, and quality analysis tools for frontend workspaces.
- ts-analyzer - A comprehensive TypeScript codebase analyzer that provides detailed metrics on type safety, code complexity, and quality.
- ngcompass - Angular-aware static analysis for architecture, performance, SSR, security, and code quality.
- ng-vitals - Static analysis tool that evaluates health, architecture, maintainability, and modernization readiness.
-
Debugging
- ngx-dev-toolbar - A powerful development toolbar for Angular applications to improve your developer productivity directly in the browser.
- ngx-error-handling - This library seamlessly manages unhandled RxJS, signal, and classic errors, making them accessible through an Rx subject (ErrorBus).
- ngrx-devtool - A development tool for visualizing and debugging NgRx state management.
- ngx-debug-console - A floating debug console overlay for Angular 14+ applications.
- omelet-angular-debug-panel - Angular debug dashboard providing visibility into SQL activity, server timing, and authentication debugging.
- angular-scan - Automatically detects and highlights Angular components that are re-rendering.
- angular-render-scan - A visual debugging overlay for Angular change detection.
- rxjs-leak-finder - A dev-mode tool that finds leaked RxJS subscriptions in Angular apps.
- form-lens-angular - Inspect form structure, control state, validation errors, and nested form trees directly inside your app during development.
- Bugfender - A cloud service to collect logs and Angular errors in Real-Time.
- allstak-angular - Captures uncaught exceptions, structured logs, navigation spans, outbound HTTP requests, and component render timing — with first-class support for both standalone and NgModule-based apps.
-
Documentation Tools
- Compodoc - The missing documentation tool for your Angular application.
- ng-doc - The documentation engine for Angular projects.
- docgeni - A modern, powerful and out of the box documentation generator for Angular components lib and markdown docs.
- trakk.js - Automatic Documentation Generation / Real-Time Code Execution Flow / Testing / Debugging / Onboarding for Front-End Applications.
- ng-component-hierarchy-visualizer - An unobtrusive tool that generates Mermaid diagrams of your Angular component hierarchy from route configs.
- easy-template-x-angular-expressions - Angular expressions support for [easy-template-x](https://github.com/alonrbar/easy-template-x).
- angular-latest-snippets - Comprehensive Angular v19 [snippets](https://marketplace.visualstudio.com/items?itemName=JMGomes.angular-latest-snippets) for TypeScript and HTML, including support for the latest Angular features.
- story-ui - Automate component documentation by generating Storybook stories through AI-powered conversations, compatible with many LLM providers.
- Storybook - The UI development environment you'll love to use.
- envguards - Framework-agnostic environment variable validation, documentation generator, and `.env.example` creator.
- ngmd - Angular docs starter. Drop a markdown file, get a route.
- storybook-addon-angular-manifest - A Storybook addon that builds an Angular component manifest from your stories and Compodoc documentation.
-
Editor and IDE Extensions
- VS Code NG Language Service - This extension provides a rich editing experience for Angular templates.
- VS Code Angular Snippets - This extension for Visual Studio Code adds snippets for Angular for TypeScript and HTML.
-
Generators and Scaffolding
- LymeStack - A full-stack web app template and toolset that helps small teams quickly build and enhance applications.
- abp - Open‑source ASP.NET Core framework for enterprise apps with opinionated architecture.
- teleport-code-generators - A collection of code generators for modern JavaScript applications.
- generator-jhipster-ionic - You can use it to generate an Ionic app that talks to a JHipster backend.
- angular-scaffold - Scaffold an Angular project with all tooling you need for production projects.
- goxygen - Generates a Go backend, links a front‑end, and provides Docker files for dev and prod.
- skulljs - Provides a standardized file structure for building web applications using popular JavaScript and TypeScript frameworks.
- ngx-schematics-utilities - Useful utilities for Angular Schematics.
- ngx-rename - Windows (PowerShell) and Linux (Bash) scripts to rename an Angular project and update config files.
- jangular-cli - A Spring Boot + Angular starter kit with JWT auth, Flyway migrations, route protection, and CLI setup.
- Node Initializr - Quickly gathers your app’s dependencies and handles much of the initial setup for you.
- spiderly - A `.NET` (C#) generator that turns your EF Core model into a customizable `.NET` and Angular app.
- ng-openapi - Angular OpenAPI Client Generator.
- tmf - A lightweight TypeScript port of Eclipse Modeling Framework (EMF) for model-driven, type-safe data models across Node.js, Java, and Angular/React.
- nx - The Nx Plugin for Angular contains executors, generators, and utilities for managing Angular applications and libraries within an Nx workspace. It also enables using Angular Devkit builders and schematics in Nx workspaces.
- polyfront-scaffold - A generator that offers a wide range of configuration options to build a flexible, scalable Angular app.
- orval - Generate, validate, cache and mock in your frontend applications, based on your OpenAPI specification.
- angular-sitemap-generator - Generates a `sitemap.xml` file for an Angular project.
- cem-angular-generator - Generate Angular wrapper libraries from Custom Elements Manifest output.
- Bootify.io - Generate Spring Boot apps with custom database, Angular frontend and CRUD functionality.
- AutoFormsBuilderFilesGenerator - Generate Angular forms from OpenAPI/Swagger with `ng-openapi-gen`, featuring strong typing, validation, and UI helpers.
- ngx-autogen - A set of schematics that streamline Angular workflows by generating best‑practice code and reducing repetitive setup tasks.
- angular-momentum - Spins up Angular projects in a monorepo quickly with minimal configuration.
- nx - The Nx Plugin for Angular provides executors, generators, and utilities for managing apps and libraries in Nx.
- swaggular - A tool to generate Angular services and models from Swagger/OpenAPI specifications.
- prism - Auto-generate framework wrappers (React, Vue, Svelte, Angular, Solid, Preact) and HTML/CSS examples from Lit web components.
- momentum-cms - An Angular-based headless CMS. Define collections in TypeScript, auto-generate an Admin UI, REST API, and database schema.
- enterprise-java-saas-starter-kit - Production-ready SaaS starter with Java 21, Spring Boot 3.4, Angular 21 (Standalone + Signals), MSSQL, JWT auth, and Docker Compose.
- SaaS Starter - Production-ready NestJS + Angular 21 SaaS boilerplate with JWT/OAuth/2FA auth, Stripe payments, multi-tenancy, RBAC, BullMQ, Docker, Terraform, and 55+ tests.
- angular-openapi-gen - Tree-shakeable, signal-native API clients generator.
- nx - This plugin offers executors, generators, and utilities for managing applications and libraries.
- JHipster - Open source app generator for Spring Boot and Angular.
- ng-openapi-signals - Signal-first OpenAPI client generator for Angular using `resource()` and `fetch()`.
-
IDE Extensions
- 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).
- Angular Extension Pack - This extension pack packages some of the most popular VS Code Angular extensions.
- Nx Console - Spend less time looking up command line arguments and more time shipping incredible products.
- VS Code Angular HTML - Syntax highlighting for Angular HTML template files.
- vscode-angulartools - You can explore an Angular project, enhance documentation, reverse engineer code, and do refactoring with [AngularTools](https://marketplace.visualstudio.com/items?itemName=coderAllan.vscode-angulartools).
- Angular Dev Tools - Browser extension for debugging and profiling Angular applications.
- ngx-html-syntax - Angular HTML Syntax for [Sublime Text](https://www.sublimetext.com/).
- Redux DevTools - Can be used in combination with `@ngrx/store-devtools` to inspect the state of your NgRx app.
- zed-angular - This extension integrates the Angular Language Service into [Zed](https://zed.dev/).
- i18n-studio - A VS Code extension for Angular i18n that shows translations inline, autocompletes keys, and streamlines multilingual workflows.
- Angular File Generator - Supercharge your Angular development with intuitive and rapid file generation.
- Angular Schematics Pro - Ultimate Angular code generation in Visual Studio Code.
- vscode-angular-auto-import - Automatically suggests and inserts missing Angular component imports based on selectors used in templates.
- GraphLens - Interactive architecture visualizer for Angular projects.
- angular-code-quality-toolkit - [VS Code extension](https://marketplace.visualstudio.com/items?itemName=arul1998.angular-code-quality-toolkit) to run Angular code-quality tools (depcheck, ts-prune, ESLint) and help clean unused code and dependencies.
- mini-typescript-hero - A lightweight, modern VSCode extension that automatically manages your import statements.
- AngularCliPlus - Angular CLI commands, schematics generator, and project tools for VS Code.
- ngx-translatorex - A VS Code extension that extracts hard-coded strings from Angular templates and components into `ngx-translate` i18n keys.
-
Internationalization
- ngx-tolgee - Web-based localization tool enabling users to translate directly in the Angular app they develop.
- localess - A powerful translation management tool and content management system built using Angular and Firebase.
- angular-l10n - Angular library to translate texts, dates and numbers.
- I18N - Soluling has implemented a collection of internationalization (I18N) APIs for `.NET`, Angular and Delphi.
- ng-extract-i18n-merge - Extract and merge i18n xliff translation files for Angular projects.
- ngx-translate - The internationalization (i18n) library for Angular.
- ngx-translate-module-loader - Highly configurable and flexible translations loader for `@ngx-translate/core`.
- ngx-translate-multi-http-loader - A loader for ngx-translate that loads translations with http calls.
- angular-ecmascript-intl - Contains pipes to transform internationalization data using Intl.* browser APIs.
- i18n-ally - All in one i18n extension for VS Code.
- intl-tel-input-ng - An Angular component to easily integrate [intl-tel-input](https://github.com/jackocnr/intl-tel-input).
- transloco-keys-manager - Tools to help reduce monotonous work.
- ng-intl - A type-safe, reactive Angular i18n library with lazy-loaded translations, signals, and full TypeScript support.
- ngx-easy-i18n-js - The easy internationalization (i18n) library for Angular.
- ngx-translate-routes - This service translates titles and route paths.
- ngx-translate-lint - Simple CLI tools for check `ngx-translate` keys.
- ngx-merge-json-translations - This builder helps merge the `messages.json` file, after running extract-i18n, into target files using specified locales taking care to delete removed keys and add new ones.
- ngx-i18n-extract-regex-cli - Tool for extracting translations from Angular app using regex.
- ngx-translate-version - Angular module that provides version to your language files.
- ngx-signal-translate - A signal-driven translation service.
- ngs-plural - It simplifies the process of generating grammatically correct plural forms based on a numeric count and supports custom language rules.
- ngx-translate-messageformat-compiler - Compiler for `ngx-translate` that uses [messageformat.js](https://github.com/messageformat/messageformat) to compile translations using ICU syntax for handling pluralization and gender.
- ngx-g11n - Angular helpers for internationalizing and localizing your application.
- ng-translate-extensions - Angular module extending ng2-translate.
- Transifex - You can easily localize Angular components using the [Transifex library extension](https://www.npmjs.com/package/@transifex/angular). This library extends the functionality of [Transifex Native JavaScript SDK](https://developers.transifex.com/docs/javascript-sdk).
- Crowdin - AI-powered localization software, automating content translation with 600+ apps and [integrations](https://store.crowdin.com/search?query=angular).
- doloc - Instant translations in your [Angular](https://doloc.io/getting-started/frameworks/angular/) workflow.
- ngx-i18n-tools - Tools for translating Angular apps, including an Excel/XLIFF converter—[ngx-xlf-xlsx](https://github.com/Ascor8522/ngx-i18n-tools/tree/master/ngx-xlf-xlsx).
- ngx-translate-db - A lightweight, efficient Angular translation library that uses IndexedDB for offline storage.
- ngx-glagolize - An Angular library for handling translations and localization.
- locale-translator - Translate any locale with the provided pipe or service.
- tldraw-web-component - Make [tldraw](https://github.com/tldraw/tldraw) work with frameworks other than React; Made primarily to work with Angular.
- signal-translate - Translation service that is using signals at its core.
- ngx-translate-cut - Angular pipe for cutting translations ✂️ 🌍 (plugin for `@ngx-translate`).
- ngx-signal-i18n - A type-safe, lazy-loaded i18n solution for Angular, built on signals for reactivity and compatible with zoneless.
- @OGS-GmbH/ngx-translate - A lightweight Angular i18n library with REST-based setup, dynamic language switching, and flexible translation management.
- angular-intlayer - This [intlayer](https://github.com/aymericzip/intlayer) package allows you to internationalize your Angular application. It provides context providers and hooks for Angular internationalization.
- ngx-translate-toolkit - An Angular library designed to extend `@ngx-translate/core` and streamline the process of managing translations in large projects.
- angular-translation-checker - A tool for `ngx-translate` that detects unused or missing keys to keep i18n files clean.
- i18n-scanner-toolkit - Extract, detect missing translations, and manage multilingual content with CSV export/import.
- transloco - The internationalization (i18n) library for Angular.
-
Programming Languages
Categories
Third Party Components
1,150
Table of contents
430
Development Utilities
332
Learning Resources
137
Angular
124
Architecture and Advanced Topics
100
Framework Interoperability
96
Angular Pulse
96
Site Templates
82
State Management
75
Security and Authentication
72
Testing
64
Underlying Technologies
57
Angular-Inspired Solutions
37
External Lists
4
Sub Categories
Angular
255
Third Party Components
175
Wrappers
94
UI Libraries
82
Free Templates
71
Form Controls
70
Mixed Utilities
69
Internationalization
59
AI
58
Forms
47
HTTP
47
Data Grids
45
Animations
44
Other State Libraries
41
Authentication
40
Editors
40
Google Developer Experts on X
38
CLI Tools
38
Blogs
37
Notifications
37
Charts
35
Scroll
33
Generators and Scaffolding
33
YouTube Channels
32
External Integration
32
Analytics
31
Loaders
31
Icons
30
RxJS
30
Dates
29
TypeScript
27
Carousels
25
Layout
25
UI Libraries built on Tailwind CSS
25
Helpers
24
NgRx
23
Directives
23
Form Validation
23
Component
22
Official Resources
22
Images
22
DOM
22
UI Libraries built on Material
21
File Upload
21
IDE Extensions
20
Training
20
Accessibility
20
Drag and Drop
19
Deployment
19
Books
19
Builders
19
Visual Effects
19
Media
19
Router
19
Community
19
Feature Flags
18
Modals
18
Calendars
18
UI Library and Framework Ionic
18
Markdown
17
Viewers
17
Storage
17
Captcha
17
Updating Angular
16
Performance
16
Linting
15
Code Analysis
15
Pipes
15
E2E
15
Styling
15
Maps
14
JSON Forms
14
Angular Team on X
14
QR Codes
13
Security Best Practices
12
Documentation Tools
12
Onboarding and Product Tours
12
Runtime
12
Keyboard Mouse
12
Debugging
11
UI Libraries built on Bootstrap
11
Cross-Framework Integration
11
Tooltips
11
NGXS
11
Paid Templates
11
Payments
10
Cheat Sheets
10
Server-Side Rendering
10
Desktop Applications
10
Role-Based Access Control
10
Angular Experts on X
10
Exercises
9
Loggers
9
GraphQL
9
UI Primitives
9
PDF
8
Podcasts
8
Cookies
8
Module Federation
8
SEO
7
Certification Programs
7
Newsletters
6
Networking
6
Micro-Frontends
5
CSV
5
Layout Components
4
Editor Components
4
Printing
4
Guides
3
Monorepos
3
Style Guides
3
Editor and IDE Extensions
2
Bluesky
1
Keywords
angular
773
typescript
236
javascript
90
angular2
69
ngx
59
react
55
rxjs
46
library
43
vue
34
ui
33
angular-components
32
angular-library
29
i18n
28
material
28
angular-material
27
components
27
angular-cli
24
tailwindcss
23
ngrx
23
signals
22
svelte
22
angular17
21
component
21
testing
21
frontend
20
admin-dashboard
19
npm
19
nodejs
19
forms
18
state-management
17
translation
16
icons
16
angular-component
16
ng
16
bootstrap
16
internationalization
15
angular4
15
svg
15
angular5
15
jest
15
angular18
14
template
14
charts
14
css
14
nextjs
14
cli
13
angular7
13
material-design
13
grid
13
redux
13