An open API service indexing awesome lists of open source software.

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

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