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

  • Third Party Components

    • Forms

      • reactive-form-extensions - This project enhances Angular ReactiveForms with input trimming, error messages, and validation-based CSS—without extra dependencies.
      • pro-form - A predefined set of reactive and reusable form input components based on Angular Material.
      • ngx-forms - Collection of Angular form functions, that will help you build your applications.
      • @klubinskak/ngx-smart-forms - Smart, Signal-powered form state utilities for Angular 17+.
      • @pixelbyaj/ngx-form - ISO20022 Angular Forms use XSD/XML to design HTML forms and structure MX messages.
      • ngx-custom-controls - Angular library with a base directive (BaseCvaImplementationDirective) that simplifies custom form controls with built-in validation.
      • ngxAccessor - This library adds a third approach to Angular forms, integrating signals alongside existing methods with adaptability.
      • angular-template-signal-forms - A modern Angular form library built from the ground up with Signals — flexible, type-safe, and fully themeable.
      • ngx-formidable - A powerful Angular component library for building rich, validated forms.
      • piying-view - A strongly typed frontend form solution; an alternative to `ngx-formly` and Angular's official form framework.
      • ngx-form-m3 - Persian form library for Angular and Material 3.
      • lite-form - A lightweight Angular library offering customizable form components with validation, styling, and animations.
      • cc-form-engine - Advanced Angular library for reactive form generation and management with dynamic validation, change tracking, and customizable error messages.
      • ngx-autosave-forms - Autosave form values in localStorage using template forms or reactive forms in Angular.
      • ngx-better-forms - Streamlined, maintainable reactive form utilities.
      • ngx-query-builder - Angular query builder with standalone components, sensible defaults, templating hooks, and full form support for domain-specific editors.
      • ngx-mat-form - Angular library that uses Reactive Forms and Angular Material to dynamically generate configurable forms from a schema.
      • ng-forge - A type‑safe, dynamic forms library built for Angular’s signal‑based forms.
      • zignal - A type-safe Angular form library using signals and Zod validation, with Turkey-specific validators and multi-language support.
      • ngx-currency-v2 - A fork of [ngx-currency](https://github.com/nbfontana/ngx-currency) updated for the latest Angular version.
      • ngx-form-stepper - A strongly typed Angular library for building robust multi‑step forms that prevent invalid states during development with minimal configuration.
      • ngx-form-rules - A lightweight Angular library that makes it easy to enable, disable, and control reactive form fields using simple, declarative rules.
      • ngx-entity-forms - Generates fully typed Angular FormGroups from your entity interface, complete with autocompletion, validation, and error messages.
      • ngx-form-draft - Zero-dependency Angular form draft auto-save and restore.
      • ngx-signal-forms - A signal‑driven, type‑safe Angular form library built on the experimental Signal Forms API with modern M3 styling.
      • formsync - A developer‑friendly Angular‑ready form backend that lets you collect and manage submissions without server‑side code.
    • Form Validation

      • ngx-valdemort - Simpler, cleaner Angular validation error messages.
      • validointi - This is a library to help you validate your template driven forms.
      • angular-reactive-validation - This library simplifies Reactive Forms validation by eliminating the need for extensive HTML.
      • ngx-formcontrol-errors - A directive for showing errors in Angular form controls.
      • ngx-validator-pack - A collection of validators designed
      • ngx-error-msg - The error message mapping library for Angular.
      • ngx-reactive-form-class-validator - A lightweight library for dynamically validate Angular reactive forms using [class-validator](https://github.com/typestack/class-validator) library.
      • ng-error-tooltips - Angular reactive forms library that shows error tooltips for user-friendly validation messages.
      • ngx-forms-validator - A forms validator library for Angular.
      • ngx-control-message - A library for binding a message to a synchronous or asynchronous form control validator.
      • safari-numfix - A lightweight utility to safely handle paste and keydown events on number input fields in Safari.
      • ngx-input-errors - Angular Reactive Forms library that auto-displays validation errors with multi-language and custom message support.
      • error-message - Lightweight Angular library for flexible, standardized validation error display and management.
      • ng-reactive-form-validate - Angular library for streamlined form validation with customizable messages, Transloco integration, and styled error labels.
      • angular-password-checker - Protect your users from re-using a password known to be hacked with this simple Angular directive.
      • translation-validation - Automatic validation messages for Angular forms in any language.
      • polish-validators - A validation library designed for Polish-specific formats, also available as an Angular wrapper via [ngx-polish-validators](https://www.npmjs.com/package/ngx-polish-validators).
      • ngx-mat-errors - Offers a simple and adaptable approach to presenting error messages within a `MatFormField`.
      • oop-validator - Powerful, flexible validation library for any UI framework—Vue, React, Angular, and more—for complete front-end validation.
      • ngx-cross-field-validation - Angular library providing conditional, equality, inequality, and sequence-based validations on form controls.
      • validauth - Lightweight, powerful authentication validators for JavaScript applications.
      • ngx-validation-messages - This module simplifies the display of form validator messages by using a single component.
      • ngx-validators - A library that provides additional Angular Validators, including the ones Angular provides.
    • Icons

      • angular-fontawesome - Official Angular component for Font Awesome 5+.
      • ng2-fontawesome - A small directive making font awesome even easier to use.
      • ng-icons - The ultimate icon library for Angular.
      • primeicons - The default icon library of PrimeNG with over 250 open source icons developed by PrimeTek.
      • angular-svg-icon - Angular component and service for inlining SVGs allowing them to be easily styled with CSS.
      • @ngneat/svg-icon - A lightweight library that makes it easier to use SVG icons in your Angular Application.
      • Angular-Svg-Sprite - Simplify Angular SVG icon usage with flexible, manageable SVG sprites.
      • ng-hero-icons - Use [Heroicons](https://heroicons.com) in your Angular application.
      • ngx-fluent-ui - Angular & online library for Microsoft Fluent UI icons.
      • angular-remix-icon - Angular wrapper for Remixicon icon library.
      • angular-line-awesome - Angular Line Awesome is an Angular component to manage [Line Awesome](https://icons8.com/line-awesome) icons.
      • angular-tabler-icons - This package allows you to use the [Tabler Icons](https://tabler.io/icons) in your Angular applications.
      • ngx-fast-svg - SVGs, fast and developer friendly in Angular.
      • angular-techs-logos - Library of tech related icons.
      • ngx-x-browser-svg-mask - Directive to easily achieve cross browser compliance while creating SVG masks.
      • coolshapes - An Angular library aiming at allowing developers to use cool-looking abstract shapes with little grainy gradients from [coolshapes](https://coolshap.es/).
      • Semantic Icons - A collection of free and open source icons ready for use in your Angular projects using the component attribute selector and the SVG tag.
      • lucide - Open-source icon library with 1000+ SVGs, featuring an [official Angular package](https://lucide.dev/guide/packages/lucide-angular) for easy integration.
      • angular-phosphor-icons - Set of components designed for utilizing [Phosphor Icons](https://phosphoricons.com/) in Angular via directives.
      • @ngverse/icons - Angular library that allows you to use popular open-source icons as regular components.
      • ic-on - The future of iconing.
      • ngxi - Comprehensive SVG icon set for Angular with seamless integration of thousands of popular icons.
      • chill-wind-icons - Dynamic Angular icon library with native Tailwind CSS support, tree-shakeable icon data, and built from Iconoir SVGs.
      • @TSB04/svg-icon - Framework-agnostic, customizable, lightweight SVG icon package for React, Vue, Angular, and more.
      • Semantic Icons - Free, open-source icon collection for Angular projects via component selector and SVG tag.
      • animated-icons - Animated icons for Angular based on [moving icons](https://www.movingicons.dev/).
      • hugeicons-angular - 5,100+ free MIT-licensed stroke-rounded icons for Angular.
      • @quikturn-sdk/logos-angular - TypeScript SDK for the [Quikturn Logos API](https://getquikturn.io/) - Fetch any company's logo by domain name.
    • Images

      • cloudinary - Angular SDK from Cloudinary.
      • ngx-image-hero - Hero animation package for smooth, clickable image zoom into immersive view.
      • ngx-image-cropper - An image cropper for Angular.
      • unpic - Angular directive for responsive, high-performance images with automatic srcset, sizing, and CDN/CMS URL detection.
      • ngx-advanced-img - Angular attribute directives suite that provides various HTML img feature extensions.
      • ngx-img-cropper - Image cropping tool for Angular.
      • ngx-smart-cropper - Angular standalone image uploader with crop, resize, drag-and-resize, grid overlays, and aspect ratio support.
      • ngx-annotorious - Angular wrapper for [Annotorious V3](https://annotorious.dev/), a library that adds annotations to images.
      • ngx-easy-image-drawing - Angular library for easy image drawing on a canvas.
      • ngx-blurhash-render - Lightweight Angular 15+ library for rendering image blurhash, requiring [blurhash](https://www.npmjs.com/package/blurhash) dependency.
      • ngx-pinch-zoom - This module enables image zooming and positioning through touch screen gestures.
      • ngx-broken-img - Angular directive to fix broken url in img. If image url returns 404, a placeholder is used to fill img's src.
      • @jjmhalew/ngx-lightbox - A [lightbox2](https://github.com/lokesh/lightbox2) implementation port to use with Angular >= 18 (zoneless).
      • ngx-avatars - Spiritual successor to [ngx-avatar](https://github.com/HaithemMosbahi/ngx-avatar).
      • ngx-image-compression - A lightweight image compression and conversion library for Angular.
      • ng-cropper - Angular image cropper built on `CropperJS` with customizable interface and optional toolbar for seamless cropping.
      • ngx-ratio-image - Angular library for displaying an image with a variable aspect ratio inside a container with a fixed aspect ratio.
      • ngx-image-magnifier - Angular image magnifier directive with keyboard modifier support, smart positioning, mobile optimization, and smooth GPU-accelerated animations.
      • ngx-image-fallback - Image Fallback Directive for Angular.
      • @necraidan/ngx-lightbox - A lightweight, accessible Angular 21+ lightbox with zoom, pan, pinch‑to‑zoom, and keyboard navigation, all with zero dependencies.
      • ng-image-optimizer - A high‑performance Angular SSR image optimizer that uses [Sharp](https://sharp.pixelplumbing.com/) to deliver a Next.js‑style experience.
    • JSON Forms

      • ngx-formly - JSON powered / Dynamic forms for Angular.
      • formio - JSON powered forms for Angular.
      • fluent-form - Building dynamic form in Angular with Fluent API or JSON.
      • jsonforms - Customizable JSON Schema-based forms with React, Angular and Vue support out of the box.
      • jsonforms-angular-seed - Angular-based JSON Forms seed app.
      • ng-formworks - An Angular [JSON Schema](https://json-schema.org/) Form builder, similar to, and mostly API compatible with, [Angular Schema Form](http://schemaform.io/examples/bootstrap-example.html), [React JSON Schema Form](https://rjsf-team.github.io/react-jsonschema-form/), and [JSON Form](https://ulion.github.io/jsonform/playground/).
      • DynamicAngularForm - Create dynamic form by passing a JSON with associated values.
      • dynamic-forms - Angular project for dynamic forms based on JSON.
      • json-forms-zorro-wrapper - Ng Zorro wrapper for json forms library.
      • ngx-formwork - Framework for Angular Reactive Forms built from JSON or TypeScript configuration.
      • ngx-formbar - A highly flexible framework for generating declarative reactive forms.
      • formitiva - A framework-agnostic runtime form engine for building forms from JSON schemas.
    • Keyboard Mouse

      • ngx-focus-control - Library to provide tools to work with focus and focusable elements to improve user interfaces and accessibility.
      • virtual-keyboard-javascript - Virtual Keyboard for JavaScript, React, Angular, & Vue.
      • angular-touch-keyboard - Virtual Keyboard for Angular applications.
      • hotkeys - A declarative library for handling hotkeys in Angular applications.
      • ngx-contextmenu - A context menu component for Angular.
      • ngx-keys - A reactive Angular library for managing keyboard shortcuts with signals based UI integration.
      • focusly - A lightweight Angular library that brings intuitive, keyboard-driven navigation to web applications.
      • ngx-arrow-state - An Angular library that provides terminal/shell-like input history navigation using arrow keys, plus Ctrl+Enter form submission for textareas.
      • angular-onscreen-material-keyboard - Onscreen virtual keyboard for Angular using Angular Material.
      • @TanStack/hotkeys - Type-Safe keyboard shortcuts library with awesome devtools.
      • ngx-keyboard-shortcuts - An actively maintained fork of the archived [ngx-keyboard-shortcuts](https://github.com/milestechnologies/ngx-keyboard-shortcuts) package, adding Angular 16+ support and modern tooling.
    • Layout

      • overview - A collection of tools to make your Angular views more modular, scalable, and maintainable.
      • ngx-layout - Clone of Angular FlexLayout.
      • angular-gridster2 - Angular gridster 2.
      • angular-grid-layout - Responsive grid with draggable and resizable items for Angular applications.
      • ng-polymorpheus - A tiny library for polymorphic templates in Angular.
      • gui - JSON powered GUI for configurable panels.
      • ngx-flickering-grid - A simple component library to create a container with an animated grid pattern background.
      • ngx-gridpattern - A simple component library to create a container with an pattern background.
      • ngx-retro-grid - 3D perspective grid component with customizable colors, rotation, and smooth animations for nostalgic or futuristic effects.
      • ngx-bottom-sheet - A highly customizable and lightweight Angular service that provides a mobile-friendly bottom sheet component.
      • @marxlnfcs/ngx-grid - Simple Angular Grid Module for modern grid layouts.
      • ngx-swipe-menu - A component to create "swipe left to 'action'" experiences.
      • static-columns - Define columns with static width with Angular and FlexBox.
      • ngx-flex-layout - Port of [Angular Flex Layout](https://github.com/angular/flex-layout) to provide support after EOL.
      • ngx-zoomable - A zoomable, pannable container component for Angular applications.
      • berg-layout - This monorepo contains versions of the [Berg Layout for Angular](https://www.npmjs.com/package/@berg-layout/angular), React, and Web Components.
      • angular-split - Angular split component.
      • ngx-material-drawer - Configurable Angular Material Drawer and Toolbar.
      • lightweight-grid-layout - A headless, dependency-free grid layout library for JavaScript/TypeScript that works with any framework or none, leaving rendering and styling to users.
      • ng-flex-layout - Angular library that provides a responsive, flexible layout API built on Flexbox and mediaQuery observables.
      • dockview-angular - Zero dependency layout manager supporting tabs, groups, grids, and splitviews.
      • gridstack - Mobile-friendly TypeScript library for drag-and-drop, multi-column responsive dashboards with Angular support.
      • ngx-compactable-row - Provides a responsive button row that moves excess buttons into a menu when space is limited.
    • Layout Components

      • ngx-van - Tiny HTML nav replacement with desktop nav and built-in mobile sliding side menu—no duplication.
      • ng-simple-sidebar - A simple Angular component to generate a sidebar with a hamburger menu.
      • ngx-bladex - A simplistic blade component for Angular with minimize/maximize and a close button.
      • @berg-layout/angular - This is the Angular version of [berg-layout](https://github.com/blidblid/berg-layout).
    • Loaders

      • dotglitch-ngx - Highly customizable lazy loader for Angular components.
      • ngx-spinner - A library for loading spinner for Angular.
      • ngx-progressbar - Nanoscopic progress bar, featuring realistic trickle animations.
      • ngx-loading-bar - Automatic page loading / progress bar for Angular.
      • angular-busy - Show busy/loading indicators on any element during a promise/Observable.
      • ngx-loader-indicator - Awesome loader for Angular applications. No wrappers only your elements.
      • ngx-skeleton-loader - Make beautiful, animated loading skeletons that automatically adapt to your Angular apps.
      • angular-svg-round-progressbar - Angular module that uses SVG to create a circular progressbar.
      • ngx-loading-buttons - A lightweight Angular library to add a loading spinner to your Angular Material buttons.
      • ngx-fastboot - Dynamic Angular configuration loader that boosts startup performance by compiling configs in a separate chunk.
      • nx-svg-loaders - Angular, React, Svelte, Vue SVG loader/spinner collection.
      • skeletonizer - Lightweight, customizable package for creating skeleton views with Vue and Angular adapters.
      • ngx-loading-overlay - An Angular directive adding a loading overlay to your HTML.
      • square-progress - Square progress bar with animation.
      • ng-loading-skeleton - A lightweight and customizable Angular loading skeleton component.
      • groupix-spinner-library - A lightweight Angular spinner library for seamless loading animations!
      • ngx-loading-page - Sleek, adaptable loading component with multiple loader styles, dynamic themes, customizable backgrounds, and Bootstrap card design.
      • ngx-source - Dynamically load JavaScript and CSS during application execution.
      • ngx-spinner-loading - Lightweight, customizable Angular spinner with global, section, inline loaders, HTTP interceptors, and signal-based state.
      • ngx-signal-loading-bar - A lightweight, signal-based, zoneless loading bar for Angular.
      • ng-overlay-skeleton-loader - A lightweight Angular directive to add customizable skeleton loading states to your components.
      • ngxsmk-skeleton-loader - A lightweight skeleton loader featuring SCSS animations and easy theming.
      • skeleton-styler - A lightweight, framework-agnostic library to generate skeleton loading UIs with customizable styles and animations.
      • ngx-loader - Basic loader paired with a service for state management.
      • ngx-ui-loader - Versatile Angular loader/spinner with foreground/background modes, progress bars, and multi-loader support.
      • ngx-promise-buttons - Chilled loading buttons for Angular.
      • shimmer-from-structure - A React, Vue, Svelte, & Angular shimmer/skeleton library that automatically adapts to your component's runtime structure.
      • boneyard - Auto-generated skeleton-loading framework that works with React, Preact, Vue, Svelte, Angular, and React Native.
      • skedapt - A zero‑config adaptive skeleton loader for Angular that decorates the host element so the skeleton automatically matches the container’s natural layout.
    • Loggers

      • lumberjack - Versatile Angular logging library with built-in drivers and easy customization for custom log drivers.
      • angular-logger - A logger built with Angular in mind.
      • @Xilerth/ngx-logger - Library for seamless custom logging integration, enabling efficient debugging, monitoring, and analytics.
      • pretty-html-log - Module for pretty-printing ComponentFixtures, DebugElements, NativeElements, or HTML strings in Jest Angular tests.
      • log4ngx - A TypeScript logging framework for Angular projects, based on concepts used in Log4j, Log4net, etc.
      • ngx-wlog - A logger for Angular applications, drawing inspiration from the `.NET` [NLog](https://nlog-project.org/).
      • ng-route-logger - A simple and powerful library that helps you track page navigation times inside your Angular application.
      • candy-logger - A lightweight logging library for JavaScript/TypeScript with a popup UI in browsers and enhanced terminal output in Node.
      • @pubfunc/ngx-common-log - A flexible logging library for Angular applications with support for multiple transports, log levels, namespaces, and dependency injection.
    • Maps

      • cesium-angular-example - A simple web application that demonstrates integration of [Cesium](https://cesium.com) with the LATEST version of Angular.
      • ngx-mapbox-gl - Angular binding of `mapbox-gl-js`.
      • ng-maps - Modular map components for Angular.
      • ngx-leaflet - Core Leaflet package for Angular.
      • ngx-maplibre-gl - Angular binding of maplibre-gl.
      • ng-azure-maps - Angular HTML-driven wrapper for azure-maps-controls, enabling easy integration into Angular applications.
      • HERE maps API for JavaScript - Integrate [HERE Maps](https://www.here.com/) with Angular for interactive maps, geocoding, routing, and more.
      • ngx-gaia-gis - An Angular service that simplifies map creation and interaction using the powerful [OpenLayers](https://openlayers.org/) library.
      • ngx-google-maps-places - Angular wrapper for Google Maps Places API, simplifying Google Places integration.
      • angular-yandex-maps - Yandex.Maps Angular components that implement the Yandex.Maps JavaScript API.
      • ngx-leaflet-markercluster - Provides [leaflet.markercluster](https://github.com/Leaflet/Leaflet.markercluster) integration into Angular projects.
      • angular-cesium - Creating map based web apps using Cesium and Angular.
      • workletjs - An Angular map component library that provides seamless integration with OpenLayers, enabling developers to create interactive and customizable maps.
      • ng-simple-maps - Beautiful, lightweight SVG world maps for Angular applications.
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