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.
-
Programming Languages
Categories
Third Party Components
1,076
Table of contents
432
Development Utilities
303
Learning Resources
128
Angular
117
Architecture and Advanced Topics
96
Angular Pulse
93
Framework Interoperability
91
Site Templates
76
State Management
73
Security and Authentication
71
Testing
62
Underlying Technologies
57
Angular-Inspired Solutions
36
External Lists
4
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
Keywords
angular
744
typescript
220
javascript
89
angular2
68
ngx
55
react
52
rxjs
44
library
41
ui
32
angular-components
31
vue
31
material
28
i18n
27
angular-material
26
components
26
angular-library
25
angular-cli
24
ngrx
23
tailwindcss
23
component
21
angular17
20
testing
20
frontend
19
svelte
19
npm
19
nodejs
18
signals
17
admin-dashboard
17
state-management
17
bootstrap
16
ng
16
icons
16
forms
16
jest
15
translation
15
angular5
15
angular4
15
internationalization
15
template
14
svg
14
nextjs
14
angular18
14
charts
13
angular-component
13
css
13
ionic
13
grid
13
angular7
13
material-design
13
redux
12