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

Table of contents
- Third Party Components
  - angular-feather - This package allows you to use [Feather Icons](https://github.com/feathericons/feather) in your Angular applications.
  - icon-lib-builder - Small tool to generate a Framework component (React, Preact, Angular, Svelte or Vue) from a SVG icon.
  - svg-icons-builder - Angular builder to build svg-icons using svg-to-ts.
  - ngx-img-fallback - Load placeholder image on image error, Angular 5+.
  - ngx-image-zoom - Angular component for zoomable images.
  - ngx-image-compress - Angular library for uploading and compressing images.
  - ng-cloudimage-responsive - Cloudimage responsive plugin will make your website load the exact image size you need depending on your user's screen size.
  - angular-cropperjs - [Cropper.js](https://github.com/fengyuanchen/cropperjs) integration for Angular 6+.
  - angular2-hotkeys - Keyboard shortcuts for Angular 2 apps.
  - ng-sortgrid - A grid that allows you to sort all items via drag & drop.
  - ng2-tree - Angular tree component.
  - angular2-promise-buttons - Loading buttons for Angular 2 by @johannesjo.
  - ng-lazy-load-component - Lazy load Angular component into HTML template without routing.
  - content-loader - SVG component to create placeholder loading, like Facebook cards loading.
  - ngx-loading - A loading spinner for Angular applications.
  - ng-block-ui - Block UI Loader/Spinner for Angular.
  - angular-loaders - Angular loader components.
  - ng-circle-progress - A simple circle progress component created for Angular based on SVG Graphics.
  - ngx-logger - NGX Logger is a simple logging module for Angular (6+). It allows "pretty print" to the console, as well as allowing log messages to be POSTed to a URL for server-side logging.
  - ngx-action-logger - Logger for Angular applications, capable of both outputting data to the console or sending data to elastic.
  - ngx-markdown-editor - Angular markdown editor based on ace editor.
  - trellisorg platform - The Trellis Open Source Repo contains projects and tools, some of which Trellis uses internally, but has opened sourced for the community to use.
  - myndpm - Open Source Angular Libraries contributed by @myndpm.
  - ngx-grpc - Angular gRPC framework.
  - ng-vibe - Designed for Angular 17+, these tools (drawer, dialog, toastify,timer, service-locator) are here to enhance your development process with dynamic and efficient solutions.
  - angular-kit - A set of powerful Angular tools including pipes, lifecycle hooks, and reactive enhancements.
  - ngx-smart-modal - Modal/Dialog component crafted for Angular (Ivy-compatible).
  - angular2-notifications - A light and easy to use notifications library for Angular.
  - ngx-infinite-scroll - Infinite Scroll Directive for Angular.
  - ng-table-virtual-scroll - Virtual Scroll for Angular Material Table.
  - universal-model-angular - Store and state management for Angular.
  - akita - A Reactive State Management Tailored-Made for JS Applications.
  - mini-rx-store - MiniRx is the reactive state management platform.
  - ngx-odm - Angular 14+ wrapper for RxDB.
  - ngx-easy-table - The Easiest Angular Table. 12kb gzipped! Tree-shakeable. 55 features and growing!
  - ui-grid - UI Grid: an Angular Data Grid.
  - datagrid - Angular TanStack table with shadcn Theme.
  - angular-datatables - An Angular2+ library for building complex HTML tables using the [DataTables](https://datatables.net) jQuery plug-in.
  - angular-confirmation-popover - An Angular 15.0+ bootstrap confirmation popover.
  - ng2-tooltip-directive - Forked from [ng2-tooltip-directive](https://github.com/drozhzhin-n-e/ng2-tooltip-directive).
  - angular-ellipsis-tooltip - Angular component to display ellipsis and material tooltip dynamically.
  - NG-ZORRO MOBILE - An enterprise-class mobile UI components based on Ant Design Mobile and Angular.
  - sky-ui - Angular UI kit.
  - ngx-neumorphic - Angular Neomorphism UI kit.
  - pupakit - Angular UI Kit based on an atomic approach to building interfaces (Not production ready).
  - @angular-material-extensions/google-maps-autocomplete - **Autocomplete** input component and directive for google-maps built with Angular material design.
  - @angular-material-extensions/select-country
  - @angular-material-extensions/password-strength - Angular UI library to illustrate and validate a **password**'s strength with material design.
  - angular material components - Angular Material Library provide extra components for every project.
  - David UI Angular - Components library for enterprise-level projects based on Tailwind CSS and Angular.
  - ngx-json-viewer - JSON formatter and viewer in HTML for Angular.
  - infinite-viewer - Infinite Viewer is a document viewer component with infinite scrolling.
  - ng-portal - Component property connection in Angular application.
  - ngx-lipsum - Easily use lorem-ipsum dummy texts in your Angular app as directive, component or by using a service.
  - ngx-signal-immutability - Compile-time and runtime immutability for Angular signals.
  - ngrx-action-bundles - This library allows you to reduce ngrx boilerplate by generating action bundles for common ngrx redux store scenarios and allows you to easily connect state, dispatch actions and listen for actions everywhere across your applications.
  - rx-sandbox - Marble diagram DSL based test suite for RxJS.
  - observer-spy - This library makes RxJS Observables testing easy!
  - rxjs-toolbox - Set of custom operators and handy factory functions for RxJS.
  - rxjs-insights - See through the observables.
  - audit-debounce - RxJS operator to debounce and audit simultaenously.
  - typescript-challenges - A set of challenges helping you understand TypeScript.
  - angular-highcharts - Highcharts directive for Angular.
  - img-comparison-slider - Image comparison slider. Compare images before and after. Supports React, Vue, and Angular.
  - qrcode.angular - QR Code implementation based on Angular.
  - angular-slickgrid - A wrapper of the lightning fast & customizable [SlickGrid](https://github.com/mleibman/SlickGrid) datagrid. It also includes multiple styling themes.
  - ng-condition - An alternative directive to `*ngIf; else` that simplifies conditions in HTML templates.
  - BlockNoteAngular - Unofficial [BlockNote](https://github.com/TypeCellOS/BlockNote) Angular wrapper.
  - ngx-jodit - Angular wrapper for [Jodit](https://github.com/xdan/jodit) WYSIWYG editor.
  - ngx-sticky-kit - Angular Sticky makes HTML elements sticky. For instance, the header, the menu, the sidebar or any other block can be stuck at the desired position.
  - ng2-gauge - SVG gauge component for Angular.
  - ngx-angular-query-builder - A new version of [angular2-query-builder](https://github.com/zebzhao/Angular-QueryBuilder) that supports modern Angular. Used to create queries and filters.
  - ngrx-entity-relationship - ORM selectors for Redux, `@ngrx/store`, `@ngrx/entity`, and `@ngrx/data`. Ease of relationships with entities.
  - zingchart-angular - [ZingChart](https://www.zingchart.com/) is a declarative, efficient, and simple JavaScript library for building responsive charts.
  - olt-ngx-ui-switch - NGX UI Switch (Forked) to latest version of Angular.
  - ngx-plyr - Angular 17+ bindings for [plyr](https://github.com/sampotts/plyr) video and audio player. Supports everything that original library supports.
  - dyte-io/ui-kit - Dyte's UI library for creating meeting interfaces.
  - pastanaga-angular - An Angular implementation of Pastanaga design system offering a set of re-usable UI components which are covering typical needs of any web application. It is maintained by [Plone](http://plone.org/) and [Guillotina](http://guillotina.io/) communities.
  - Mamba UI - A free and open-sourced UI kit with 150+ Tailwind CSS components and templates.
  - dejajs-components - This repository is an Angular components library and the common utility functions, with a demo application for testing it.
  - ngx-unsplash - Angular service for proxied [Unsplash API](https://unsplash.com/developers).
  - ngx-youtube-player - Angular component based on [YouTube player iframe API](https://developers.google.com/youtube/iframe_api_reference).
  - ngx-toastr-message - A lightweight, customizable Angular library for displaying toast notifications.
  - ngx-breadcrumpy - An awesome library to easily add breadcrumbs to your Angular application.
  - ngx-crumbs - An ultimate breadcrumbs service for Angular.
  - breadcrumbs - An Angular component that automatically lists breadcrumbs based on the currently routed components.
  - ngx-breadcrumb - A highly customizable and flexible breadcrumb component for Angular.
  - ngx-fileupload - [ngx-file-upload/core](https://github.com/r-hannuschka/ngx-fileupload/tree/master/src/projects/core) only contains services and classes to enable file upload with Angular. [ngx-file-upload/ui](https://github.com/r-hannuschka/ngx-fileupload/tree/master/src/projects/ui) contains components and pipes to provide a UI.
  - @AditechGH/ngx-smart-forms - This workspace contains Angular libraries that streamline form handling and validation by simplifying form creation, validation, and error display, and offering advanced customization and performance boosts.
  - ngx-dynamic-form - A library that works in Angular 16 with Bootstrap 5 to generate forms in a simple and dynamic way.
  - ngx-lazy-directive - Provides an easy way to lazy load components combined with the `*ngIf` directive, thereby reducing the First Contentful Paint time when a module is large.
  - ngx-videogular - An HTML5 video player for Angular 2.0. Videogular is a wrapper over the HTML5 video tag, so you can just add whatever you want. This provides a very powerful, but simple to use solution, for everybody.
  - ngx-form-errors - Display form validation errors for Angular Reactive forms.
  - boringer-avatars - A fork from [boring-avatars](https://github.com/boringdesigners/boring-avatars). This rewrites the base as Mitosis components and exports into multiple framework flavors including [Angular](https://github.com/cmgriffing/boringer-avatars/tree/main/packages/lib-angular).
  - ngx-simple-state-manager - Component-bound simple to handle state managment that is accessible application wide with type support and an observer to handle any reactive state changes if and when needed.
  - ngx-custom-carousel - A feature-rich Angular 17 component crafted to elevate your carousel experience.
  - ngx-iban-validator - IBAN Validator for your reactive Angular forms, comes without any dependencies and can be used even outside of Angular as standalone function in any JS project. It can perform format, digit, and length IBAN validations.
  - ngx-windows - Angular Windows Components and Services.
  - ckeditor - Ckeditor plugin for Angular2+.
  - @semantic-icons/heroicons - [Semantic icons](https://github.com/khalilou88/semantic-icons) helps developers to use [Heroicons](https://heroicons.com/) icons inside Angular projects.
  - ngx-concern - Angular library for creating simple, unstyled dialogs/modals and action-sheets/bottom-sheets.
  - ngxs-state-mixins - Concept of how to implement state mixins in NGXS.
  - dz-ngx-element - [NgxElement](https://www.npmjs.com/package/@zdigambar/ngx-element) enables to lazy load Angular components in non-Angular applications. The library will register a custom element to which you can pass an attribute to specify what component you want to load.
  - ngx-edge-slider - Highly flexible and customizable slider component designed for Angular applications. It offers an intuitive interface to manage slides, providing smooth transitions, autoplay functionality, responsive design, with interactive features like draggable slides and configurable navigation.
  - ngx-relationship-visualiser - A D3 force-directed-graph, implemented in Typescript for Angular, generates a visualisation graph with customisable link lengths and multiple labels between nodes. The graph can handle new data that will update lines, nodes, links, and path labels.
  - ngx-cookiebot - An Angular wrapper around the [Cookiebot](https://www.cookiebot.com/) SDK.
  - ngx-flexbox - Designed as an alternative to [@angular/flexlayout](https://github.com/angular/flex-layout), ngx-flexbox provides Angular developers with component layout features using a custom layout API, media query observables, and injected DOM flexbox-2016 CSS stylings.
  - railz-visualizations - A collection of reusable web components that help you build a dashboard using normalized financial transactions and analytics from the FIS Accounting Data as a Service API.
  - xUI - Angular UI Component Library heavily inspired by Discord design.
  - ngx-simple-material-table - Angular library to simplify usage of the Angular Material table component.
  - iconic - Angular library to provide components of open-source icon libraries.
  - schema-forms - A library for building forms through standard JSON schemas.
  - ng-inf-scroll - A lightweight library for adding infinite scrolling to Angular apps.
  - 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.
  - mTruncate - A lightweight and customizable Angular directive for truncating text with support for tooltips.
  - @man-es/ngx-tools - The MAN ngx-tools repository contains a collection of libraries is designed to elevate your Angular development experience.
  - angular-wheel-date-picker - A date picker component for Angular applications that features a scrollable wheel interface similar to native mobile date pickers.
  - red-zoom-angular - A sleek and user-friendly image zoom library, designed as an Angular directive and fully customizable with CSS and SCSS.
  - ngx-neumorphic - Angular Neomorphism UI kit.
  - Angular Material Dev UI - Angular Material Dev UI (or Angular Material Blocks) is one place stop for developers to explore components and blocks for their Angular Material and Tailwind CSS based applications.
Testing
- Component
  - Angular Testing Library - Extends DOM Testing Library by introducing APIs tailored for testing Angular components.
  - Jasmine - Simple JavaScript testing.
  - Jest - A delightful JavaScript testing framework with a focus on simplicity.
  - swc-angular - This is a set of Angular presets that enable you to use SWC (Speedy Web Compiler) with Jest or Vitest.
  - swc-angular-plugin - SWC (Speedy Web Compiler) is a lightning-fast JavaScript/TypeScript compiler, but it doesn't support Angular so you need this plugin.
  - karma-image-snapshot - Karma Jasmine matcher that performs image comparisons based on [jest-image-snapshot](https://github.com/americanexpress/jest-image-snapshot) for visual regression testing.
  - jest-preset-angular - Jest configuration preset for Angular projects.
  - jest-preview - Debug your Jest tests. Effortlessly.
  - jest-marbles - Helpers library for marbles testing with Jest.
  - jest-codemods - Codemods for migrating to Jest.
  - ts-jest - A Jest transformer with source map support that lets you use Jest to test projects written in TypeScript.
  - ngx-speculoos - Simpler, cleaner Angular unit tests.
  - angular-unit-test-helper - Helper functions to help write unit tests in Angular using mocks and spies.
  - nightwatch-plugin-angular - Official [Nightwatch](https://nightwatchjs.org/) plugin which adds component testing support for Angular apps. It uses the Webpack DevServer under the hood. Requires Nightwatch 2.4+.
  - angular-testing-kit - A set of convenient utilities to make Angular testing with Jasmine and Karma simpler.
  - 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.
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.

Programming Languages

TypeScript 1,354 JavaScript 69 HTML 47 SCSS 20 CSS 9 C# 5 Go 5 Rust 4 Shell 3 Vue 2

ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

awesome-angular

Table of contents

Third Party Components

Testing

Component

E2E

Guides

Helpers

Third Party Components

Animations