Data

Tools

Indexes

Applications

Experiments

Awesome

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

    • Internationalization

      • 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.
      • langsync - CLI tooling for localization workflows in TypeScript projects.
      • localive - Update text directly inside running React, Vue, Angular, or Svelte apps, saving changes instantly to your locale files without searching JSON keys.
      • i18n-egy - A modern, lightweight, and tree-shakable Angular internationalization library powered by Signals that is safe for server-side rendering.

    • 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.
      • neighbor - Catch accessibility issues in your markup, CSS, and copy before they ship.

    • 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.
      • ngx-script-optimizer - A lightweight Angular library designed to supercharge your third-party script handling.
      • esbuild Bundle Size Analyzer - Visualize the contents of your esbuild bundle.
      • ngx-unused - Find declared but unused Angular classes in your codebase.
      • sonda - Universal visualizer and analyzer for JavaScript and CSS.
      • ng-reactive-lint - An Angular-specific linter enforcing optimal reactivity patterns with Signals and RxJS.
      • ngx-network-monitor - A lightweight Angular service to monitor network status: online/offline, connection quality (2G/3G/4G/5G), and ping latency.
      • ng-queuex - Experimental Angular ecosystem with React-like scheduler and signal-driven directives for fine-grained change detection.
      • ng-event-plugins - A tiny library for optimizing change detection cycles for performance sensitive events.
      • ngx-performance-diagnostics - Spot performance bottlenecks, excessive change‑detection cycles, and memory leaks in Angular apps with zero setup.
      • angular-rust-compiler - High-performance Angular AOT compiler written in Rust, providing full static compilation of Angular components and directives.
      • ngx-idle-monitor - A lightweight Angular service for tracking user activity, managing session timeouts, and syncing idle state across tabs.
      • ngx-worker-bridge - A lightweight, zero-boilerplate reactive bridge for Angular and React that makes Web Workers (Dedicated and Shared) as simple as calling a regular method.

    • Runtime

      • falso - All the Fake Data for All Your Real Needs.
      • runtime-config-loader - Angular library that provides an easy way to load a configuration JSON file for runtime configuration.
      • ngs-json-utils - A lightweight Angular library for easy JSON manipulation—deep clone, serialize, and deserialize with TypeScript support.
      • lbx-change-sets - Automatically tracks entity changes using an extendable base repository.
      • angular-compile - Angular Dynamic Compile. Convert strings to Angular components.
      • ngx-signal-hub - Lightweight Angular hub unifying callbacks with signal‑based event observation.
      • ngx-json-reader - Angular 17+ JSON reader/editor with multi-URL comparison and diffing.
      • ngx-compare-object - Angular utility to compare an original object with its modified version.
      • deepequalspure - JavaScript object deep equals service for Angular projects.
      • ng-noop - A minimal, DOM‑less Angular platform for custom runtimes, CLIs, servers, and experimental renderers.
      • ngx-api-mimic - This library allows you to mock data and simulate a fake API using Angular’s HTTP Interceptor.
      • worker-bridge - Bridge Angular and React to web workers with simple reactive methods and no boilerplate.

    • SEO

      • ngaox - Boost Angular apps with seamless content integration, optimized SVGs, advanced SEO, and efficient social media management.
      • ngx-seo - Kwerri OSS: samvloeberghs.be + ngx-seo.
      • seo-analyzer - The library for analyze a HTML file to show all of the SEO defects.
      • Angular React SEO - Angular & React Examples SEO (Search engine optimization).
      • unhead - Full-stack `<head>` management for Angular applications.
      • seo-manager-pro - A powerful SEO manager for Angular, React, Vue, and Vanilla JS to easily set tags and structured data.
      • @davidlj95/ngx-meta - Quickly set Angular site metadata (meta tags, Open Graph, X Cards, JSON-LD) with SSR support.

    • Styling

      • Angular-Material-Tailwind-Integration - A stable, themeable set of CSS custom properties mapping Material Design System tokens to Tailwind CSS utility classes.
      • element-identifier - Create reliable, distinct CSS selectors to target DOM elements, and utilize a web component for visual inspection and selection.
      • ngx-angora-css - A JavaScript-based CSS framework that dynamically generates styles on page load.
      • ngx-classed - A library allows you to dynamically add or remove classes based on state.
      • ngx-css - An Angular abstraction for [Squid CSS](https://github.com/squidit/css).
      • panda - Easily use Panda, CSS-in-JS Framework, with Angular with its dedicated [integration](https://panda-css.com/docs/docs/installation/angular).
      • Super JSS - Super JavaScript Stylesheets is a tiny Angular runtime library that generates atomic CSS with breakpoints and theming.
      • ngx-mq - A declarative library that uses signals and the native [matchMedia API](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) to manage media queries, with built-in breakpoint presets for Tailwind, Bootstrap, and Angular Material.
      • tokiforge - Framework-agnostic design token engine for React, Vue, Angular, Svelte & vanilla JS.
      • Theme-Kit - A unified design‑token SDK that centralizes your colors, typography, and spacing for seamless use across React, Vue, Angular, or any JavaScript project.
      • prime-ng-theme-fe - A visual theme designer for PrimeNG.
      • ngx-responsive-signals - Signal-based responsive breakpoints for Angular.
      • Material Theme Builder - Real-time Angular Material theming for your app.
      • ngx-theme-stack - Modern, SSR-safe Angular library for managing dark mode, light mode, and custom themes via Angular Signals.
      • ukit-css - JIT utility-first CSS engine — Tailwind-style on-demand class generation for any frontend stack (React, Vue, Angular, Svelte, Next.js, Astro, plain HTML).

  • External Lists

  • Framework Interoperability

    • Cross-Framework Integration

      • Stencil - Generate Angular component wrappers for your web components.
      • gong - Full‑stack framework with Go (Gin, Gorm, pure SQLite) backend and Angular Material frontend.
      • ngx-reactify - Library to make running Angular and React applications together easy.
      • ng-react-bridge - A lightweight Angular package that enables developers to seamlessly render React components inside Angular components using a directive.
      • @ngeenx/ngx-react - Embed React components or apps into Angular projects.
      • zero-angular - Angular bindings for [Zero](https://zero.rocicorp.dev/).
      • @retejs/angular-plugin - Angular plugin with a classic preset of node, connection, socket, and control components, built on [Rete.js](https://retejs.org/).
      • detector - A zero-dependency, TypeScript-first library for fast, universal detection of platforms, frameworks, browsers, and capabilities.
      • @oguimbal/ngx-react - Enables smooth integration of React and Angular components, or effortless migration between the two.
      • AnQst - Generates Angular services and native Qt widgets from a shared DSL, letting Angular apps compile into QWidget‑based C++ UIs via the AnQst CLI and host libraries.
      • rozie.js - A cross-framework compiler that transforms single Vue/Alpine-flavored component files into native Angular code without runtime overhead or wrapper boilerplate.

    • External Integration

      • Sentry - A developer-first error tracking and performance monitoring platform.
      • 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 - Headless spreadsheet engine in TypeScript for formula parsing/evaluation, with an Angular integration demo.
      • Strich - 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.
      • Bit - Leverage Bit to build composable software.
      • Partytown - Relocate resource intensive third-party scripts off of the main thread and into a web worker.
      • Postcat - A lightweight, extensible API tool based on Angular and Electron.
      • angular-twitter-timeline - Angular Public Twitter Timeline Widget.
      • limitless-angular - A collection of powerful Angular libraries designed to enhance the Angular ecosystem and help developers build better applications with a focus on `Sanity.io` integration.
      • stream-chat-angular - Angular Chat SDK ➜ Stream Chat. Build a chat app with ease.
      • ngx-notion-cms - Render your Notion content through your Angular application as a CMS.
      • angular-rsocket - Connect to an [RSocket](https://rsocket.io/) server, handle streams/messages, and manage tokens via a provider.
      • ngx-wagmi - Connect Angular apps to Blockchain wallets and contract interactions.
      • Otter - Highly modular Angular framework with units for localization, testing, customization, and CMS-driven dynamic configuration.
      • fusio-sdk-javascript-angular - This SDK enables Angular apps to integrate with [Fusio](https://www.fusio-project.org/), used by projects like the [backend](https://github.com/apioo/fusio-apps-backend) and [developer](https://github.com/apioo/fusio-apps-developer).
      • ng-storyblok - A simple way to integrate [Storyblok](https://www.storyblok.com/) into your Angular application.
      • foblex2D - Angular library for 2D geometry with utilities for points, lines, vectors, shapes, and transformations, used in `Foblex Flow`.
      • @elastic/apm-rum-angular - Elastic APM Real User Monitoring for Angular applications.
      • Bloomreach Angular SDK - Provides simplified headless integration with [Bloomreach Content](https://www.bloomreach.com/en/products/content) for Angular-based applications.
      • ngx-signalr-websocket - A lightweight ASP.NET SignalR client for Angular.
      • Partytown - Relocate resource intensive third-party scripts off of the main thread and into a web worker.
      • Keploy - Record test cases and mocks by interacting with the Angular UI, and then test them using Keploy.
      • alterior - Isomorphic TypeScript framework for building modular services with seamless Angular integration.
      • 23blocks SDK - Build full-stack apps 10x faster with modular backend blocks.
      • ngx-unity - A type-safe bridge for bidirectional communication between Unity WebGL/WebGPU and Angular.
      • DataDog - With the Datadog Angular integration, you can resolve performance issues quickly.
      • Elastic - Real User Monitoring JavaScript agent with Angular applications.
      • NativeScript - Provides platform APIs directly to the JavaScript runtime (with strong types) for a rich TypeScript development experience.
      • ngx-wp-shortcode - A library that lets Angular applications render WordPress shortcodes as native Angular components.

    • Wrappers

      • 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+.
      • ngx-grapesjs - Angular wrapper library for [GrapesJS](https://grapesjs.com).
      • gojs-angular - A set of Angular components to manage [GoJS](https://gojs.net/latest/index.html) Diagrams, Palettes, and Overviews.
      • ngx-three - Use [Three.js](https://threejs.org) with your Angular project in a declarative way.
      • ngx-socket-io - [Socket.IO](https://socket.io/) module for Angular.
      • angular-three - Angular Renderer for [THREE.js](https://github.com/mrdoob/three.js).
      • ngx-sentry - Angular wrapper for [Sentry JavaScript SDK](https://github.com/getsentry/sentry-javascript).
      • ngx-fabric-wrapper - Angular wrapper library for [Fabric](http://fabricjs.com/).
      • ngx-three-globe - An Angular library that provides an interactive, 3D globe visualization built using `Three.js`.
      • ngx-tagify - Angular library that wraps [Tagify](https://github.com/yaireo/tagify/).
      • ngx-xapi - Lightweight Angular wrapper for [xAPI](https://xapi.com/).
      • ngx-pendo - A simple wrapper to load Pendo in Angular.
      • ngx-surreal - Lightweight Angular wrapper for the [SurrealDB](https://surrealdb.com/) JavaScript SDK.
      • ngx-filesize - Angular wrapper for [filesize.js](https://filesizejs.com/).
      • ngx-katex - A simple Angular wrapper for [KaTeX](https://github.com/KaTeX/KaTeX).
      • ngx-chessground - Angular wrapper for [chessground](https://github.com/ornicar/chessground).
      • ngx-barcode6 - An Angular component for Angular 9+ for creating 1-D barcodes based on [JsBarcode](https://github.com/lindell/JsBarcode).
      • ngx-viz - Simple Angular [viz.js](https://viz-js.com/) wrapper to render [DOT graphs](https://graphviz.org/doc/info/lang.html).
      • ngx-serializer - Angular wrapper of `@paddls/ts-serializer` library.
      • ngx-pocketbase - PocketBase Angular SDK for interacting with the [PocketBase API](https://pocketbase.io/docs). Based on the [PocketBase JavaScript SDK](https://github.com/pocketbase/js-sdk).
      • zag-angular - Angular wrapper for [zag](https://github.com/chakra-ui/zag).
      • seatsio-angular - Angular wrapper for rendering [Seats.io](https://www.seats.io/) seating charts.
      • ngx-kel-agent - Client library for Angular applications to integrate with [kel-agent](https://github.com/k0swe/kel-agent).
      • ngx-d3 - A [D3](https://d3js.org/) wrapper service for Angular applications inspired by [d3-ng2-service](https://github.com/tomwanzek/d3-ng2-service).
      • @interopio/ng - [IO Connect](https://interop.io/) Angular wrapper to simplify initializing and using IO Connect libraries in projects.
      • ngx-xyflow - Angular wrapper of [xyflow](https://github.com/xyflow/xyflow).
      • d3-cloud-angular - D3 Cloud component for Angular built upon [d3-cloud](https://github.com/jasondavies/d3-cloud).
      • lyne-angular - Angular wrapper for the [Lyne Web Components](https://github.com/sbb-design-systems/lyne-components).
      • ng-elementum - A modern fork of `@angular/elements` that enhances the integration of Angular components with the Web Components standard.
      • ngx-webdatarocks - 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-neoline - Angular wrapper for [NeoLine](https://tutorial.neoline.io/) N3 dAPI, detecting provider, awaiting READY, and exposing typed methods.
      • angular-email-editor - Drag-n-drop email editor by [Unlayer](https://unlayer.com/embed) as an Angular wrapper component.
      • cytoscape-angular - A production-ready Angular library providing sophisticated graph visualization capabilities using [Cytoscape.js](https://js.cytoscape.org/).
      • ngx-virtual-select - Component to integrate [Virtual Select](https://github.com/sa-si-dev/virtual-select) in Angular.
      • chat-widget-adapters - Angular wrapper for the [LiveChat](https://developers.livechat.com/) Chat Widget (JavaScript API).
      • angular-calendly - A modern Angular library that provides standalone components for embedding [Calendly](https://calendly.com/) scheduling widgets.
      • ngx-open-web-ui-chat - Angular component library for embedding [Open WebUI](https://openwebui.com/) chat with Socket.IO streaming, conversation history and markdown support.
      • ngx-highlight-js - Angular wrapper around [highlight.js](https://highlightjs.org/) for syntax highlighting.
      • ngx-apexgantt - Angular wrapper for [ApexGantt](https://github.com/apexcharts/apexgantt), a JavaScript library to create Gantt diagrams built on SVG.
      • ngx-linkifyjs - Angular [Linkify](https://github.com/nfrasser/linkifyjs) wrapper to auto-detect URLs, emails, hashtags, and mentions and convert them into HTML links.
      • ngx-apexsankey - Angular wrapper for [ApexSankey](https://github.com/apexcharts/apexsankey) - A JavaScript library to create Sankey diagrams.
      • ngx-apextree - Angular wrapper for [ApexTree](https://github.com/apexcharts/apextree) - a JavaScript library for creating organizational and hierarchical charts.
      • simplyfire - A lightweight Firestore API for Firebase cloud functions & Angular.
      • ngfire - A minimal Angular wrapper around the Firebase JS SDK.
      • ngx-simple-text-diff - Angular library for displaying text differences using the [diff](https://www.npmjs.com/package/diff) library.
      • rive-angular - Modern Angular wrapper for [Rive](https://rive.app/) animations with reactive state management, built with Angular signals and zoneless architecture.
      • @foisit/angular-wrapper - The AI-Powered Conversational Assistant for Angular Applications.
      • ngx-vis - Angular wrapper for [vis.js](https://visjs.org/).
      • atlas-editor - Angular wrappers that dynamically load the React‑based Atlaskit editor and side‑navigation web components.
      • flowchart-sequence-designer-angular - Angular wrapper for [flowchart-sequence-designer](https://github.com/ag-gr-hub/flowchart-sequence-designer).
      • ng-number-flow - Angular wrapper around [number-flow](https://github.com/barvian/number-flow) — an accessible, animated number component.
      • ngx-boomerangjs - An Angular 21+ wrapper for [boomerangjs](https://github.com/akamai/boomerang) that provides automatic script loading and Real User Monitoring (RUM) support via Angular's dependency injection system.

  • Learning Resources

Programming Languages
TypeScript 1,431 JavaScript 73 HTML 51 SCSS 20 CSS 9 C# 6 Go 5 Rust 4 Shell 3 Vue 3
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