awesome-angular

:page_facing_up: A curated list of awesome Angular resources
https://github.com/PatrickJS/awesome-angular

Last synced: 6 days ago
JSON representation

Testing
- Component
  - docker-ng-cli-karma - Angular Docker image capable of running Karma with Chrome.
  - Meticulous AI - Cover the 1000s of edge cases of your application - without writing or maintaining a single test.
  - Early AI - Save time, enhance code coverage, and ensure quality with Early's automatically generated, verified, and validated unit tests. Works with Jest and Vitest.
  - @jscutlery/playwright-ct-angular - Playwright Angular component testing.
  - Vitest - A Vite-native testing framework.
  - wdio-harness - WebdriverIO support for Angular component test harnesses.
  - testronaut - By removing mocks and guesswork, [Testronaut](https://testronaut.github.io/testronaut/) enables developers to visually inspect output and write precise tests with Playwright’s robust API.
- E2E
  - Cypress - End to End and Component Testing for Angular.
  - testcafe - A user-friendly end-to-end testing solution.
  - cypress-harness - This library provides Cypress support to Component Test Harnesses.
  - webdriverio - Next-gen browser and mobile automation test framework for Node.js.
  - Puppeteer Angular Schematic - Adds [Puppeteer-based](https://github.com/puppeteer/puppeteer) e2e tests to your Angular project.
  - playwright-ng-schematics - Adds Playwright Test to your Angular project.
  - ngx-playwright - Tools to run Playwright e2e tests in an Angular workspace.
  - playwright-coverage - Report coverage on Playwright tests using v8 coverage, without requiring any instrumentation.
  - Cypress to Playwright - A curated collection of resources that can help you to migrate your test suite from Cypress to Playwright.
  - Playwright Chrome Recorder - Export Chromium recorder tab data to Playwright tests. This gives you a nice starting point that you can refine to modern Playwright.
  - playwright-mcp - A Model Context Protocol (MCP) server that provides browser automation capabilities using Playwright.
  - lib-e2e-cypress-for-dummys - An Angular library that automatically records the Cypress commands needed to test your application while you browse and use the interface.
  - Puppeteer Angular Schematic - Adds [Puppeteer-based](https://github.com/puppeteer/puppeteer) e2e tests to your Angular project.
  - playwright-ng-schematics - Adds Playwright Test to your Angular project.
  - twd - In‑browser test runner with instant feedback, Testing Library support, Vite discovery, and built‑in API mocking—framework‑agnostic and easy to use in Angular.
- Guides
  - how-do-i-test - Repository representing different testing use cases for Angular and Spring.
  - angular-tour-of-heroes-jest-100-coverage - 100% unit testing coverage of the popular Angular demo app - Tour of Heroes.
  - Tim Deschryver Blog - A rich source of valuable perspectives and practical tips on testing.
- Helpers
  - Auto-create and -update tests tool - Automate Angular unit test and boilerplate with this schematic.
  - spectacular - Offers test harnesses for Angular applications and libraries.
  - ng-mocks - Angular testing library for mocking components, directives, pipes, services and facilitating TestBed setup.
  - ng-mocks-sandbox - A repo with guides and examples for unit tests in Angular applications using ng-mocks.
  - spectator - A Powerful Tool to Simplify Your Angular Tests.
  - stryker-js - Mutation testing for JavaScript and friends.
  - msw - Seamless REST/GraphQL API mocking library for browser and Node.js.
  - shallow-render - Angular testing made easy with shallow rendering and easy mocking.
  - ngx-testing-tools - Provides high-level utilities and reduces boilerplate for testing Angular applications.
  - ngtx - A**ng**ular **T**esting E**x**tensions is a small set of functions that make your life easier when testing Angular components.
  - ngx-page-object-model - This library simplifies Angular UI component testing using the Page Object Model (POM), separating test logic from DOM manipulation for better abstraction.
  - @storybookjs/testing-angular - Testing utilities that allow you to reuse your stories in your unit tests.
  - Official Angular Material CDK Testing - `@angular/cdk/testing` provides infrastructure to help with testing Angular components.
  - ngx-testbox - A comprehensive testing utility library for Angular applications that simplifies test writing and improves test reliability. You will find this library useful for unit, integration, and e2e testing.
  - ng-automocks - It simplifies Angular testing by auto-generating mocks for components, directives, pipes, modules, and services using Jest, removing manual stubbing.
  - jest-angular-test-verifier - Jest reporter that verifies Angular components, services, directives, and other file types have matching test files.
  - ngx-api-mocks-interceptor - A powerful Angular HTTP interceptor for mocking API responses with support for dynamic data generation, path matching, response delays, and simulated file operations.
  - testing-library-queries - Streamlines DOM querying with a composable, chainable API, TypeScript support, CSS selector helpers, concise syntax, reusable query logic, and framework-agnostic compatibility.
  - ArchUnitTS - Enforce architecture rules, detect circular dependencies, and validate code standards in JS/TS projects with easy setup and seamless test framework integration.
  - qc-auto-package - Effortless, reliable test IDs for Angular — managed by testers, independent of code.
  - msw-lens - A tool that generates AI‑readable project state snapshots so any model can understand your mocked APIs, active scenarios, and context without manual explanation.
  - ng-magic-test-bed - Angular test bed wrapper that allows you to remove a lot of bloat code from your spec files.
  - schmock - Create callable mock APIs from OpenAPI specs or hand-crafted routes using a plugin pipeline and framework adapters.
  - vitest-auto-spy - A drop-in replacement for [jest-auto-spies](https://github.com/hirezio/auto-spies).
Third Party Components
- Animations
  - tsparticles - A component to easily add Particles animations to your Angular application.
  - ngx-confetti-explosion - Confetti in Angular.
  - ngx-lottie - Fully customizable Angular component for rendering After Effects animations. Compatible with Angular 9+.
  - angular-animations-explorer - A resource to showcase the different animations that you could do with Angular.
  - ngx-notation-reveal - Angular component to add rough notation animation when element is visible.
  - ngx-typed2 - An Angular Typing Animation Library.
  - ngx-count-animation - A package that elegantly animates number changes, creating a visually engaging transition from one value to another, perfect for counting or displaying real-time data updates.
  - ng-auto-animate - Angular Directive (library) for FormKit's [Auto Animate](https://auto-animate.formkit.com).
  - layout-projection - Beautify the Web with awesome layout animations.
  - ngx-easy-view-transitions - Angular library for easier use of the View Transitions API.
  - ngx-typed-writer - A Native Angular 2+ Typing Animation Library (Angular SSR and Angular Universal Friendly).
  - ngx-number-ticker - A simple number ticker effect to animate counting.
  - ngx-word-rotation - An Angular library designed to facilitate word rotation animations within Angular applications.
  - ngx-word-morph - An Angular library designed to facilitate word morphing animations within Angular applications.
  - ngx-cryptic-text - An Angular library that provides a cryptic text animation effect. The component animates text by randomly switching letters until the correct characters appear.
  - ngx-word-pullup - An Angular library that provides a smooth pull-up animation effect for words. This component is designed to sequentially pull up and reveal words with a customizable delay.
  - ngx-typewriter - A lightweight and easy-to-use library for creating typewriter effects. It uses RxJS to manage the typewriting effect, ensuring smooth and customizable animations.
  - ngx-gradient-text - An Angular library for smooth, animated text gradients with customizable color transitions.
  - ngx-shiny-text - An Angular library that provides a shimmering text animation effect.
  - ngx-ripple - A customizable ripple effect component for interactive, engaging backgrounds or containers.
  - ngx-shine-border - An Angular library that provides a dynamic and customizable animated border effect for Angular components.
  - ngx-border-beam - This component allows you to create a glowing, animated border that can be customized in terms of colors, border radius, and animation duration.
  - ngx-dotpattern - An Angular library that provides a customizable dot pattern background effect for your Angular components.
  - ngx-meteors - An Angular library that adds a mesmerizing meteor shower animation effect to your components.
  - ngx-background-beams - An Angular component that generates dynamic animated background beams with customizable gradients and motion paths.
  - ngx-aurora - An Angular library for a customizable, animated aurora background with gradient effects and two animation styles.
  - ngx-particles - An Angular library for interactive particle animations that respond to mouse movements, creating customizable backgrounds.
  - ngx-spotlight - An Angular library for SVG spotlight effects that highlight page sections with customizable colors and animations.
  - ngx-starry-sky - An Angular library that creates a beautiful starry sky background with optional shooting star effects.
  - ngx-connection-beam - An Angular component that dynamically renders animated connection lines between two elements.
  - ngx-countUp - Animates a numerical value by counting to it.
  - ngx-animated-counter - BugSplat's library provides simple count up and count down number animations.
  - ngx-dom-confetti - Celebrate success with dom confetti on Angular projects!
  - ngx-dotlottie-web - Angular JavaScript library for rendering Lottie and dotLottie animations in Node.js and web environments.
  - afnaan-ngx-custom-cursor - A customizable animated cursor for Angular applications. Enhance user experience with a stylish and interactive cursor effect.
  - @ramiz4/typing-text - Angular directive for animated typing effects — smooth, customizable, and standalone.
  - ngx-gsap - A lightweight, customizable Angular animation library powered by GSAP that's declarative and easy to use.
  - ngx-animations - Angular animation library inspired by GSAP, offering high-performance directives, components, and a timeline service with full RTL support.
  - ngx-spring - Create fluid, natural-feeling animations using spring physics instead of durations and easing curves.
  - ngx-unicode-spinners - 18 braille-based Unicode spinner animations for Angular. Zero runtime dependencies.
  - ng-motion - Angular animation library built on [motion-dom](https://github.com/motiondivision/motion).
  - ngx-digit-flow - Individual digit animations for Angular. Each digit has a vertical reel (0-9) that scrolls to the new value when the number changes - slot-machine / odometer style.
  - angular-movement - An Angular motion ecosystem combining a reusable animation‑directive library with a demo and documentation site in one repository.
  - ngx-transition-content - An Angular library to seamlessly transition dialog content by fading out old content, animating to new dimensions, and fading in new content.
- Calendars
  - angular-calendar - A flexible calendar component for Angular 15+ that can display events on a month, week, or day view.
  - fullcalendar-angular - The official Angular component for FullCalendar.
  - schedule-x - Material design event calendar.
  - angular-calendar-timeline - Angular 13+ timeline component for tasks or events in day, week, and month views, supporting SSR without large dependencies like jQuery or Moment.js.
  - ngx-resource-calendar - Angular resource calendar library.
  - timegrid-angular - Angular wrapper for the [HexaFlexa](https://hexaflexa.com/) Timegrid web component.
  - ngx-calendar-widget - A lightweight, customizable, and feature-rich calendar widget designed to simplify event management and scheduling in your Angular applications.
  - ngx-calendario - An Angular library for displaying customizable calendars with event support.
  - daypilot-lite-angular - Angular version of JavaScript/HTML5 event calendar/scheduler components that can display day/week/month calendar views.
  - @pyas/connect-angular - A plugin wrapper around the [Pyas Connect](https://github.com/brutforce-tech/pyas-connect) Web Component, exposing PyasConnect as a first-class Angular component.
  - ngx-strip-calendar - Strip calendar component for Angular 17+.
  - ngx-calendar-view - A responsive Angular calendar component library with day/week/month views, drag-and-drop events, mobile swipe support, and built-in dark mode.
  - ngx-datepicker-calendar - A fast, accessible Angular date‑picker library built with signals and standalone components.
  - ngx-resource-scheduler - A lightweight, flexible resource scheduler for Angular.
  - CalendarJS - Open source JavaScript calendar and scheduling component that can be integrated into Angular projects.
  - hss-calendar - A premium, lightweight, and fully customizable calendar library for Angular 19+.
  - cyrus-calendar - A lightweight, multi-calendar Angular date picker supporting Gregorian, Shamsi (Jalali / Persian), and Imperial calendars.
  - datelane - A customizable, zero-dependency Angular calendar featuring 12 views and multiple date layers.
- Captcha
  - ngx-turnstile - Cloudflare Turnstile for Angular.
  - ng-hcaptcha - Provides an easy to use component for [hCaptcha](https://hcaptcha.com/).
  - angular-yandex-smart-captcha - This library integrates Yandex SmartCaptcha into Angular forms for easy CAPTCHA protection.
  - go-captcha-angular - A simple, easy-to-use, interactive, and secure behavioral verification code that implements verification modes such as text/graphic clicking, sliding/dragging, and rotation.
  - ng-recaptcha-2 - Angular 18 fork of [ng-recaptcha](https://github.com/DethAriel/ng-recaptcha). Alternatively, you create your own service that implements Google's reCAPTCHA with the help of this [article](https://ben-5.azurewebsites.net/2024/9/5/google-recaptcha-v3-with-angular/#google_vignette).
  - ngx-slider-recaptcha - Customizable Angular library that provides a slider-based CAPTCHA component to help secure forms from spam and bot submissions.
  - @semantic-components/re-captcha - Angular 19+ integration of Google's reCAPTCHA using **signal inputs** and **standalone components**.
  - ng-cloudflare-turnstile - An intuitive, lightweight and easy to integrate [Cloudflare turnstile](https://developers.cloudflare.com/turnstile/) component for Angular.
  - altcha - GDPR, WCAG 2.2 AA, and EAA compliant, self-hosted CAPTCHA alternative with PoW mechanism and advanced anti-spam filter.
  - trustcaptcha-angular - This library helps you [integrate](https://docs.trustcaptcha.com/en/frontend/integration?frontend=angular) [Trustcaptcha](https://www.trustcaptcha.com/en) into your Angular frontend applications.
  - yandex-smart-captcha - An Angular library for integrating [Yandex SmartCaptcha](https://yandex.cloud/en/services/smartcaptcha) with support for standard/invisible captchas, reactive forms, and modern signals/effects.
  - ngx-captcha - reCaptcha components for Angular.
  - ngx-captcha-kit - This kit simplifies CAPTCHA implementation with a single component and service, ensuring compatibility with Angular 20+ features like Signals and zoneless change detection.
  - ngx-numeric-captcha - A modern, lightweight Angular CAPTCHA library featuring multiple verification challenges.
  - ngx-easy-captcha - Easy captcha implementation for both Google Recaptcha and Cloudflare Turnstile.
  - ngx-dice-captcha - A dynamic 3D CAPTCHA library featuring dice-based interaction and lifelike physics powered by Three.js and Cannon-es.
  - @semantic-components/re-captcha - Angular 19+ integration of Google's reCAPTCHA using **signal inputs** and **standalone components**.
- Carousels
  - egjs-flicking - Flicking Angular Quick Start.
  - ngu-carousel - Angular Universal carousel.
  - ngx-slider - Self-contained, mobile friendly slider component for Angular based on [angularjs-slider](https://github.com/angular-slider/angularjs-slider).
  - @MurhafSousli/ngx-gallery - Angular Gallery, Carousel and Lightbox.
  - ng-image-slider - Angular Image Slider with Lightbox.
  - ngx-slick-carousel - Angular 17+ wrapper for slick plugin.
  - ngx-splide - Splide.js integration to Angular.
  - ngx-owl-carousel-o - `owl-carousel` for Angular >=6.
  - angular2-image-gallery - Image Gallery built with Angular 17+, Node.js and GraphicsMagick.
  - ngx-drag-scroll - A lightweight responsive Angular carousel library.
  - ngx-darkbox-gallery-library - A highly configurable lightbox themed gallery library for Angular applications using the Ivy engine (Angular 15+).
  - slidecontent-angular - A simple content slide developed in Angular with navigation buttons and transition animations.
  - ngx-hm-carousel - A light carousel for Angular 18+, supports mobile touch with [HammerJs](https://hammerjs.github.io/).
  - ngx-stories - An Angular component to render Instagram like stories.
  - carousel-library - A versatile Angular library providing a feature-rich, simple, and performant carousel component.
  - ngx-simple-gallery - A lightweight gallery library for Angular 18 that presents all images as thumbnails, expanding them to full size upon clicking or tapping.
  - @daelmaak/ngx-gallery - Small, performant, responsive, dependency free, easy to use Angular 8+ gallery.
  - embla-carousel-angular - Angular wrapper for [Embla Carousel](https://github.com/davidjerleke/embla-carousel).
  - @vinlos/ngx-gallery - A simple native gallery component for Angular.
  - ngx-cdk-lightbox - Tailored CDK-based solution for rendering an image gallery with lightbox functionality in Angular.
  - rm-image-slider - Standalone Angular image slider with lightbox, lazy loading, and video support (YouTube/MP4).
  - ngx-carousel-modern - A modern, customizable carousel component for Angular 16+ with support for both standalone and NgModule-based applications.
  - @MurhafSousli/ngx-gallery - Simplifies the process of creating beautiful image galleries for the web and mobile devices.
  - fslightbox-angular - Angular version of [Fullscreen Lightbox](https://fslightbox.com/).
  - whirli-ng - Angular carousel with drag, looping, virtual slides, projected content, thumbs, SSR‑friendly responsive layouts, external controls, and a rich event API.
- Charts
  - ag-charts - Fully-featured and highly customizable JavaScript charting library.
  - ng2-charts - Beautiful charts for Angular2 based on Chart.js.
  - ngx-charts - Declarative Charting Framework for Angular2 and beyond!
  - ng-apexcharts - Angular wrapper for ApexCharts to build interactive visualizations.
  - ng-chartist - Angular component for [Chartist.js](https://github.com/chartist-js/chartist).
  - org-chart - Highly customizable org chart. Integrations available for Angular, React, and Vue.
  - systelab-charts - Systelab Angular Chart services.
  - ngx-gantt - A modern and powerful gantt chart component for Angular.
  - ngx-simple-charts - Angular 17+ library for D3 based line, bar, donut and date/timeline charts with multiple entry points. A configurable service for token handling is provided.
  - ng-flowchart - A lightweight Angular library for building drag and drop flow charts.
  - ngx-echarts - Angular directive for [Apache ECharts](https://github.com/apache/incubator-echarts).
  - ngu-flow - Angular flow diagram library.
  - highcharts-angular - Official minimal [Highcharts](https://www.highcharts.com/) integration for Angular.
  - Foblex - Angular Powered Flow-Chart Library.
  - unovis - Modular data visualization framework for React, Angular, Svelte, Vue, and vanilla TypeScript or JavaScript.
  - angular-google-charts - A wrapper for the Google Charts library written in Angular.
  - ngx-flexmonster - A powerful and fully customizable JavaScript component for web reporting and data visualization.
  - ngx-graph - Graph visualization library for Angular.
  - ng-draw-flow - A library for creating interfaces based on displaying data as nodes.
  - sequential-workflow-designer - Customizable no-code component for building flow-based programming applications or workflow automation. Zero external dependencies.
  - ngx-hierarchy - Angular component module for vertical or horizontal hierarchy/tree view with flexible dynamic template design and controls.
  - @cubejs-client/ngx - Along with [@cubejs-client/core](https://www.npmjs.com/package/@cubejs-client/core), you can [integrate](https://cube.dev/docs/product/apis-integrations/javascript-sdk/angular) Cube.js in Angular.
  - ngx-lightweight-charts - An easily extendable Angular wrapper for [Trading View Lightweight Charts](https://www.tradingview.com/lightweight-charts/).
  - amcharts5 - Charting library for JavaScript and TypeScript apps. Check out the [Angular integration guide](https://www.amcharts.com/docs/v5/getting-started/integrations/angular/).
  - ngx-interactive-org-chart - Modern Angular organizational chart component with interactive panning and zooming.
  - ng-diagram - Angular library for building interactive, customizable diagrams, node-based editors, and visual workflows.
  - pioneer-charts - An Angular library for creating responsive, customizable charts using D3.js—supports bar, line, pie, and more.
  - ngx-recharts - Build composable charts with Angular components using the same API as [Recharts](https://recharts.github.io/).
  - carbon-charts - Carbon Charts Angular is a thin Angular wrapper around the vanilla JavaScript @carbon/charts component library.
  - angular-chrts - A high-performance, developer-friendly data visualization library for modern Angular applications.
  - @utisha/graph-editor - Configuration-driven visual graph editor with SVG canvas, theming, undo/redo, custom node rendering, and dagre auto-layout.
  - Foblex Flow - Angular-native library for node editors, workflow builders and interactive diagrams: drag-and-drop nodes and connections, minimap, auto-layout, virtualization, and a keyboard accessibility layer.
  - michi-vz-mono - One engine powering 17 interactive, accessible chart types with seamless support for Angular and more, all emitting LLM‑ready data for reports, dashboards, and AI features.
  - schedula-core-angular - Official Angular wrapper for [SchedulaCore](https://www.npmjs.com/package/schedula-core) — a fast, lightweight Gantt chart & resource scheduler component.
  - ng-charts - Reangular port of `recharts`.
- Cookies
  - ngx-cookieconsent - Cookie Consent module for Angular.
  - ngx-cookie-service - Angular service for cookies. Originally based on the [ng2-cookies](https://github.com/BCJTI/ng2-cookies) library.
  - ngx-cookie-consent - Angular multi-language module to display a cookie consent banner without other dependencies.
  - cookieconsent - Simple cross-browser cookie-consent plugin written in vanilla js that can be added to [Angular](https://cookieconsent.orestbida.com/essential/getting-started.html#angular).
  - ngx-cookie-ssr - A straightforward cookie service for Angular 19 applications, inspired by ngx-cookie-service.
  - ngx-gdpr-cookie-consent - A beautiful Cookie consent library, easy to use.
  - smallest-cookie-banner - Minimal framework-agnostic cookie consent banner.
  - ngrithms-cookie-consent - Modern Angular cookie consent — standalone components, signal-based state, `provideCookieConsent()` functional setup, SSR-safe, and zero runtime dependencies.
- CSV
  - ngx-export-as - Angular 2+ / Ionic 2+ HTML/table element to export it as JSON, XML, PNG, CSV, TXT, MS-Word, Ms-Excel, and PDF.
  - ngx-csv-parser - CSV Parser for Angular by Developers Hive.
  - ng2csv - Angular service for saving data to CSV file.
  - rm-ng-export-to-csv - A lightweight and customizable Angular library to export JSON data to CSV files with auto-download support. Ideal for charts, tables, reports, and dashboards.

Programming Languages

TypeScript 1,431 JavaScript 73 HTML 51 SCSS 20 CSS 9 C# 6 Go 5 Rust 4 Shell 3 Vue 3

ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

awesome-angular

Testing

Component

E2E

Guides

Helpers

Third Party Components

Animations

Calendars

Captcha

Carousels

Charts

Cookies

CSV