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: 9 days ago
JSON representation

  • Development Utilities

    • AI

      • 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+.
    • 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.
    • 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.
    • 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.
      • Bugfender - A cloud service to collect logs and Angular errors in Real-Time.
      • angular-scan - Automatically detects and highlights Angular components that are re-rendering.
      • angular-render-scan - A visual debugging overlay for Angular change detection.
    • 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.
    • 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.
      • nx - This plugin offers executors, generators, and utilities for managing applications and libraries.
      • 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.
      • JHipster - Open source app generator for Spring Boot and Angular.
    • 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.
    • 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.
      • angular-i18next - Angular integration for [i18next](https://www.i18next.com/).
      • ngx-translate-phraseapp - The official library for integrating [Phrase Strings In-Context Editor](https://support.phrase.com/hc/articles/5784095916188-In-Context-Editor-Strings) with `ngx-translate` in your Angular application.
      • ngx-runtime-i18n - Runtime internationalization for Angular — signals-first, SSR-safe, and framework-agnostic core.
      • ruci - A CLI tool that simplifies i18n validation in Angular projects with `ngx-translate`, ensuring accurate, high-quality translations.
      • rust-ngx-translate-lint - A Rust port of `ngx-translate-lint` for improved performance.
      • ngx-bidi - Angular library for automatic or manual LTR/RTL text direction with directives, `NgxBidiService`, SCSS mixins, and module/standalone support.
      • ngx-atomic-i18n - Angular translation library with lazy loading.
      • ngx-localized-router - A lightweight Angular library that helps you localize your application routes by adding language segments to the URL.
      • xlf-sync - A CLI tool for synchronizing Angular XLIFF (1.2 & 2.0) locale files.
      • TransLatte - A CLI tool that generates translation JSON files using the Lingva API.
      • angular-locale-chain - Smart locale fallback chains for Angular and Transloco.
      • runtime-localizer - Runtime localizer for Angular.
      • i18n-keygen - Type-safe i18n keys for every build tool. One package, zero lock-in.
      • ngx-directo - Angular 18+ Signals-based library for RTL/LTR directionality, Arabic localization, and Google Font orchestration.
      • ng-linguo - Modern Angular 18+ i18n toolkit built on SignalStore — a reactive, from‑scratch alternative to `@ngx‑translate/core` and Transloco with zero RxJS in components.
    • Linting

      • @ni/javascript-styleguide - NI's JavaScript and TypeScript linter rules for ESLint.
      • @yoo-digital/eslint-plugin-angular - Custom lint rules for Angular.
      • angular-eslint - Monorepo for all the tooling which enables ESLint to lint Angular projects.
      • eslint-config-angular-strict - Modern ESLint configuration with strict rules for Angular development.
      • eslint-config-spartan - An opinionated ESLint configuration with separate configs (called mixins) for various eslint plugins.
      • eslint-plugin-ng-module-sort - Auto-sorts Angular and NestJS module arrays to keep your modules clean and organized.
      • ngx-html-bridge-markuplint - This library links Markuplint to Angular templates by reverse‑compiling them into HTML, enabling accurate linting with proper source‑mapped reporting.
      • eslint-config-neon - A comprehensive shareable ESLint configuration.
      • eslint-config-angular - Comprehensive Angular ESLint configuration with TypeScript support, component/template rules, accessibility, and CSS linting.
      • linters - Collection of super strict configurations for ESLint / StyleLint and other code quality tools.
      • angular-eslint-injection-context - ESLint rules for Angular injection context that help prevent [NG0203](https://angular.dev/errors/NG0203) errors.
      • eslint-plugin-angular-class-ordering - ESLint plugin that keeps Angular class members (fields and methods) in a consistent order with auto-fix functionality.
      • angular-eslint-zoneless - Checks that a zoneless application does not use Zone.js-based features and that signal/resource patterns are used.
      • lint-a-lot - An opinionated ESLint and Stylelint configuration for Angular projects using modern Flat Config.
    • Networking

      • ngx-device-detector - An Angular v7+ library to detect the device, OS, and browser details.
      • manifest - A lightweight Backend-as-a-Service (BaaS) that fits into a single YAML file. This [quick start](https://manifest.build/docs/angular) shows how to use it with Angular.
      • ngx-offline-indicator - A simple and customizable way to inform users about their internet connection status within their Angular applications.
      • ngx-network-status - A lightweight Angular library to detect actual internet connectivity by pinging a backend endpoint — not just relying on `navigator.onLine`.
      • angular-http-server - Simple http-server for Single Page Apps (SPAs).
      • ng2-idle - A module for responding to idle users in Angular applications.
    • Performance

      • microwave - Optimize Angular change detection effortlessly.
      • detective - Uses forensic code analysis at the architectural level to reveal hidden patterns within your codebase.
      • ngememoize - Easily boost the performance of your Angular applications by memoizing functions and getters with this lightweight and simple-to-use library.
      • hawkeye - A tool that visualizes and optimizes JavaScript bundles, revealing modules, dependencies, and assets affecting performance.
Sub Categories
Angular 255 Third Party Components 177 Wrappers 91 UI Libraries 72 Free Templates 67 Form Controls 67 Mixed Utilities 65 Internationalization 56 AI 49 Animations 43 HTTP 43 Forms 43 Data Grids 41 Authentication 40 Other State Libraries 39 Google Developer Experts on X 38 Blogs 37 CLI Tools 36 Editors 35 Notifications 33 Scroll 32 Generators and Scaffolding 31 RxJS 30 Charts 30 External Integration 30 Loaders 29 Icons 28 Dates 28 Analytics 27 TypeScript 27 UI Libraries built on Tailwind CSS 25 YouTube Channels 25 Carousels 24 NgRx 23 Form Validation 23 Layout 23 Helpers 22 DOM 22 Directives 22 Official Resources 22 Component 22 Images 21 UI Libraries built on Material 21 Books 19 Training 19 File Upload 19 IDE Extensions 19 Drag and Drop 19 Media 18 Router 18 Feature Flags 18 Accessibility 18 Builders 18 Calendars 17 Community 17 Visual Effects 17 UI Library and Framework Ionic 17 Captcha 17 Deployment 16 Storage 16 Viewers 16 Performance 16 Markdown 15 E2E 15 Styling 15 Updating Angular 15 Modals 14 Maps 14 Code Analysis 14 Angular Team on X 14 Linting 14 Pipes 14 QR Codes 13 Onboarding and Product Tours 12 JSON Forms 12 Runtime 11 Keyboard Mouse 11 NGXS 11 Security Best Practices 11 Role-Based Access Control 10 Documentation Tools 10 Desktop Applications 10 UI Libraries built on Bootstrap 10 Cross-Framework Integration 10 Tooltips 10 Payments 10 Server-Side Rendering 10 Exercises 9 Cheat Sheets 9 Loggers 9 Paid Templates 9 GraphQL 9 Angular Experts on X 9 UI Primitives 9 Debugging 8 Podcasts 8 Module Federation 8 Cookies 8 Certification Programs 7 PDF 7 SEO 7 Newsletters 6 Networking 6 CSV 5 Micro-Frontends 5 Editor Components 4 Layout Components 4 Printing 4 Guides 3 Style Guides 3 Monorepos 3 Editor and IDE Extensions 2 Bluesky 1