6258 lines
308 KiB
HTML
6258 lines
308 KiB
HTML
<h1 id="awesome-angular-awesome">Awesome Angular <a
|
||
href="https://github.com/sindresorhus/awesome"><img
|
||
src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg"
|
||
alt="Awesome" /></a></h1>
|
||
<p align="center">
|
||
<a href="https://patrickjs.com" target="_blank">
|
||
<img src="/media/new/awesome-angular.png" alt="Awesome Angular" /> </a>
|
||
</p>
|
||
<blockquote>
|
||
<p>logo designed by <a
|
||
href="https://github.com/SAWARATSUKI/KawaiiLogos">SAWARATSUKI</a></p>
|
||
</blockquote>
|
||
<p>This is the Awesome list of the Angular framework, and it contains
|
||
intriguing libraries in the Angular ecosystem for all developers.
|
||
Something missing? <a
|
||
href="https://github.com/PatrickJS/awesome-angular/edit/gh-pages/README.md">PRs
|
||
welcomed!</a></p>
|
||
<blockquote>
|
||
<p>Repo maintained by <a href="https://github.com/jdegand"><span
|
||
class="citation" data-cites="jdegand">@jdegand</span></a> and <a
|
||
href="https://github.com/patrickjs"><span class="citation"
|
||
data-cites="patrickjs">@patrickjs</span></a></p>
|
||
</blockquote>
|
||
<p>Current Angular version: <a
|
||
href="https://www.npmjs.com/~angular"><img
|
||
src="https://badge.fury.io/js/%40angular%2Fcore.svg"
|
||
alt="npm version" /></a></p>
|
||
<h2 id="table-of-contents">Table of contents</h2>
|
||
<ul>
|
||
<li><a href="#angular">Angular</a>
|
||
<ul>
|
||
<li><a href="#official-resources">Official Resources</a></li>
|
||
<li><a href="#community">Community</a>
|
||
<ul>
|
||
<li><a href="#newsletters">Newsletters</a></li>
|
||
<li><a href="#podcasts">Podcasts</a></li>
|
||
<li><a href="#bluesky">Bluesky</a></li>
|
||
<li><a href="#x">X</a>
|
||
<ul>
|
||
<li><a href="#angular-team">angular-team</a></li>
|
||
<li><a href="#experts">experts</a></li>
|
||
<li><a
|
||
href="#google-developer-experts">google-developer-experts</a></li>
|
||
</ul></li>
|
||
</ul></li>
|
||
<li><a href="#learning">Learning</a>
|
||
<ul>
|
||
<li><a href="#blogs">Blogs</a></li>
|
||
<li><a href="#books">Books</a></li>
|
||
<li><a href="#certification">Certification</a></li>
|
||
<li><a href="#cheatsheet">Cheatsheet</a></li>
|
||
<li><a href="#exercises">Exercises</a></li>
|
||
<li><a href="#online-training">Online Training</a></li>
|
||
<li><a href="#on-site-training">On-Site Training</a></li>
|
||
<li><a href="#style-guides">Style Guides</a></li>
|
||
<li><a href="#youtube-channels">YouTube Channels</a></li>
|
||
</ul></li>
|
||
<li><a href="#accessibility">Accessibility</a></li>
|
||
<li><a href="#ai">AI</a></li>
|
||
<li><a href="#analytics">Analytics</a></li>
|
||
<li><a href="#authentication">Authentication</a></li>
|
||
<li><a href="#builders">Builders</a></li>
|
||
<li><a href="#cli">CLI</a></li>
|
||
<li><a href="#deployment">Deployment</a></li>
|
||
<li><a href="#desktop">Desktop</a></li>
|
||
<li><a href="#developer-tools">Developer tools</a></li>
|
||
<li><a href="#documentation-tools">Documentation tools</a></li>
|
||
<li><a href="#feature-flags">Feature Flags</a></li>
|
||
<li><a href="#generators">Generators</a>
|
||
<ul>
|
||
<li><a href="#go">Go</a></li>
|
||
<li><a href="#net">NET</a></li>
|
||
<li><a href="#node">Node</a></li>
|
||
<li><a href="#spring-boot">Spring Boot</a></li>
|
||
</ul></li>
|
||
<li><a href="#graphql">GraphQL</a></li>
|
||
<li><a href="#http">HTTP</a></li>
|
||
<li><a href="#integrations">Integrations</a></li>
|
||
<li><a href="#internationalization">Internationalization</a></li>
|
||
<li><a href="#module-federation">Module Federation</a></li>
|
||
<li><a href="#monorepos">Monorepos</a></li>
|
||
<li><a href="#payments">Payments</a></li>
|
||
<li><a href="#security">Security</a></li>
|
||
<li><a href="#seo">SEO</a></li>
|
||
<li><a href="#server-side-rendering">Server-Side Rendering</a></li>
|
||
<li><a href="#site-templates">Site Templates</a>
|
||
<ul>
|
||
<li><a href="#free">Free</a></li>
|
||
<li><a href="#paid">Paid</a></li>
|
||
</ul></li>
|
||
<li><a href="#testing">Testing</a>
|
||
<ul>
|
||
<li><a href="#e2e">e2e</a></li>
|
||
<li><a href="#component">Component</a></li>
|
||
<li><a href="#guides">Guides</a></li>
|
||
<li><a href="#helpers">Helpers</a></li>
|
||
</ul></li>
|
||
<li><a href="#updating">Updating</a></li>
|
||
</ul></li>
|
||
<li><a href="#third-party-components">Third Party Components</a>
|
||
<ul>
|
||
<li><a href="#animations">Animations</a></li>
|
||
<li><a href="#calendars">Calendars</a></li>
|
||
<li><a href="#captcha">Captcha</a></li>
|
||
<li><a href="#carousels">Carousels</a></li>
|
||
<li><a href="#charts">Charts</a></li>
|
||
<li><a href="#cookies">Cookies</a></li>
|
||
<li><a href="#csv">CSV</a></li>
|
||
<li><a href="#data-grids">Data Grids</a></li>
|
||
<li><a href="#dates">Dates</a></li>
|
||
<li><a href="#dom">DOM</a></li>
|
||
<li><a href="#drag-and-drop">Drag and Drop</a></li>
|
||
<li><a href="#editor-components">Editor Components</a></li>
|
||
<li><a href="#file-upload">File Upload</a></li>
|
||
<li><a href="#forms">Forms</a>
|
||
<ul>
|
||
<li><a href="#general">General</a></li>
|
||
<li><a href="#form-controls">Form Controls</a></li>
|
||
<li><a href="#json-forms">JSON Forms</a></li>
|
||
<li><a href="#validation">Validation</a></li>
|
||
</ul></li>
|
||
<li><a href="#icons">Icons</a></li>
|
||
<li><a href="#images">Images</a></li>
|
||
<li><a href="#keyboard-mouse">Keyboard Mouse</a></li>
|
||
<li><a href="#layout-components">Layout Components</a></li>
|
||
<li><a href="#loaders">Loaders</a></li>
|
||
<li><a href="#loggers">Loggers</a></li>
|
||
<li><a href="#maps">Maps</a></li>
|
||
<li><a href="#markdown">Markdown</a></li>
|
||
<li><a href="#media">Media</a></li>
|
||
<li><a href="#mixed-utilities">Mixed utilities</a></li>
|
||
<li><a href="#modals">Modals</a></li>
|
||
<li><a href="#notifications">Notifications</a></li>
|
||
<li><a href="#printing">Printing</a></li>
|
||
<li><a href="#qr-codes">QR Codes</a></li>
|
||
<li><a href="#router">Router</a></li>
|
||
<li><a href="#scroll">Scroll</a></li>
|
||
<li><a href="#state-management">State Management</a>
|
||
<ul>
|
||
<li><a href="#ngrx">NgRx</a></li>
|
||
<li><a href="#ngxs">NGXS</a></li>
|
||
<li><a href="#additional">Additional</a></li>
|
||
</ul></li>
|
||
<li><a href="#storage">Storage</a></li>
|
||
<li><a href="#tooltips">Tooltips</a></li>
|
||
<li><a href="#ui-libraries">UI Libraries</a>
|
||
<ul>
|
||
<li><a href="#unspecified">Unspecified</a></li>
|
||
<li><a href="#material-based">Material</a></li>
|
||
<li><a href="#bootstrap-based">Bootstrap</a></li>
|
||
<li><a href="#tailwind-css-based">Tailwind</a></li>
|
||
<li><a href="#node-based">Node</a></li>
|
||
<li><a href="#primitives">Primitives</a></li>
|
||
</ul></li>
|
||
<li><a href="#ux-components">UX Components</a></li>
|
||
<li><a href="#viewers">Viewers</a></li>
|
||
<li><a href="#misc-components">Misc Components</a></li>
|
||
</ul></li>
|
||
<li><a href="#ionic">Ionic</a></li>
|
||
<li><a href="#rxjs">RxJS</a></li>
|
||
<li><a href="#typescript">TypeScript</a></li>
|
||
<li><a href="#inspired-by-angular">Inspired By Angular</a></li>
|
||
<li><a href="#other-lists">Other Lists</a></li>
|
||
<li><a href="#license">License</a></li>
|
||
</ul>
|
||
<h3 id="angular">Angular</h3>
|
||
<blockquote>
|
||
<p>Angular is a development platform for building mobile and desktop web
|
||
applications.</p>
|
||
</blockquote>
|
||
<h4 id="official-resources">Official Resources</h4>
|
||
<ul>
|
||
<li><a href="https://angular.dev">Site</a></li>
|
||
<li><a href="https://blog.angular.dev/">Blog</a></li>
|
||
<li><a href="https://angular.dev/overview">Documentation</a></li>
|
||
<li><a href="https://angular.dev/tutorials/learn-angular">Getting
|
||
Started Tutorial</a></li>
|
||
<li><a href="https://github.com/angular/angular">GitHub Repo</a></li>
|
||
<li><a href="https://v17.angular.io/docs">Past Documentation
|
||
Site</a></li>
|
||
</ul>
|
||
<h4 id="community">Community</h4>
|
||
<ul>
|
||
<li><a href="https://discord.com/invite/angular">Angular Discord
|
||
Channel</a></li>
|
||
<li><a href="https://x.com/hashtag/angular"><code>#angular</code></a>
|
||
hashtag on X.</li>
|
||
<li><a href="https://gitter.im/angular/angular">Gitter Channel</a></li>
|
||
<li><a href="https://stackoverflow.com/questions/tagged/angular">Angular
|
||
StackOverflow</a></li>
|
||
<li><a href="https://x.com/angular"><span class="citation"
|
||
data-cites="Angular">@Angular</span> on X</a></li>
|
||
<li><a href="https://www.reddit.com/r/Angular/">/r/Angular
|
||
Subreddit</a></li>
|
||
<li><a href="https://angularbuddies.slack.com/">Angular Buddies Slack
|
||
Channel</a></li>
|
||
<li><a
|
||
href="https://dashboard.nbshare.io/apps/stackoverflow/top-angular-questions/">Top
|
||
rated Angular stackoverflow questions Dashboard</a></li>
|
||
<li><a
|
||
href="https://github.com/maartentibau/angular-logos">angular-logos</a> -
|
||
Repo is dedicated to collecting all the different kinds of Angular
|
||
badges and logos.</li>
|
||
<li><a
|
||
href="https://github.com/madewithangular/madewithangular.github.io">made
|
||
with angular</a> - A showcase of web apps built with Angular.</li>
|
||
<li><a href="https://angular.love/">angular.love</a> - Polish community
|
||
for Angular fans.</li>
|
||
<li><a href="https://github.com/angular-sanctuary/angular-hub">angular
|
||
hub</a> - Curated list of Angular events and communities.</li>
|
||
<li><a href="https://www.angularspace.com/">angular space</a> - Your Hub
|
||
for Learning and Growing as an Angular Developer.</li>
|
||
<li><a href="https://trends.builtwith.com/framework/Angular">builtwith
|
||
trends</a> - Angular Usage Statistics.</li>
|
||
<li><a href="https://www.isthistechdead.com/angular">Is This Tech
|
||
Dead?</a> - Is Angular dead?</li>
|
||
<li><a href="https://www.youtube.com/watch?v=cRC9DlH45lA">Angular: The
|
||
Documentary | An origin story</a></li>
|
||
<li><a href="https://www.angulartalents.com/">Angular talents</a> -
|
||
Angular talents empowers independent developers available for their next
|
||
gig. Stop scouring job boards and sit back as companies reach out to you
|
||
first.</li>
|
||
<li><a
|
||
href="https://anvaka.github.io/map-of-github/#9.14/-21.9624/9.8143">Map
|
||
of GitHub</a> - Explore the NgSphere to discover repositories with
|
||
overlapping stargazers.</li>
|
||
</ul>
|
||
<h5 id="newsletters">Newsletters</h5>
|
||
<ul>
|
||
<li><a href="https://www.angularaddicts.com/">angular addicts</a></li>
|
||
<li><a href="https://prodigious-knitter-4508.ck.page/subscribe">weekly
|
||
angular</a></li>
|
||
<li><a href="https://angularweekly.substack.com/">angular
|
||
weekly</a></li>
|
||
<li><a
|
||
href="https://angularmentor.io/practical-angular-newsletter">practical-angular-newsletter</a></li>
|
||
<li><a href="https://www.danywalls.com/newsletter">danywalls</a></li>
|
||
<li><a href="https://ultimatecourses.com/newsletter">ultimate
|
||
courses</a></li>
|
||
</ul>
|
||
<h5 id="podcasts">Podcasts</h5>
|
||
<ul>
|
||
<li><a
|
||
href="https://topenddevs.com/podcasts/adventures-in-angular">Adventures
|
||
in Angular</a></li>
|
||
<li><a href="https://angularexperts.io/podcasts/">Angular
|
||
Experts</a></li>
|
||
<li><a href="https://angularair.com/">Angular Air</a></li>
|
||
<li><a
|
||
href="https://open.spotify.com/show/1PrLErQHBqBhZsRV1KHhGM">Angular Plus
|
||
Show</a></li>
|
||
<li><a
|
||
href="https://www.youtube.com/playlist?list=PLYJFRoKhU5SNcu5GBjIn4X3oVpy4fP1wV">Angular
|
||
Master Podcast</a></li>
|
||
<li><a href="https://angular-catch-up.podbean.com/">Angular Catch
|
||
Up</a></li>
|
||
<li><a
|
||
href="https://podcasts.apple.com/us/podcast/angularidades/id1702444448">Angularidades</a>
|
||
- (Spanish)</li>
|
||
</ul>
|
||
<h5 id="bluesky">Bluesky</h5>
|
||
<ul>
|
||
<li><a
|
||
href="https://bsky.app/starter-pack/brandonroberts.dev/3l7lzgkwkqu2n">Angular
|
||
Starter Pack by <span class="citation"
|
||
data-cites="brandonroberts.dev">@brandonroberts.dev</span></a></li>
|
||
</ul>
|
||
<h5 id="x">X</h5>
|
||
<h6 id="angular-team">Angular Team</h6>
|
||
<ul>
|
||
<li><a href="https://x.com/mgechev">Minko Gechev</a></li>
|
||
<li><a href="https://x.com/AlanAgius4">Alan Agius</a></li>
|
||
<li><a href="https://x.com/jean__meche">Matthieu Riegler</a></li>
|
||
<li><a href="https://x.com/synalx">Alex Rickabaugh</a></li>
|
||
<li><a href="https://x.com/_crisbeto">Kristiyan Kostadinov</a></li>
|
||
<li><a href="https://x.com/devversion">Paul Gschwendtner</a></li>
|
||
<li><a href="https://x.com/devjoost">Joost Koehoorn</a></li>
|
||
<li><a href="https://x.com/simona_cotin">Simona Cotin</a></li>
|
||
<li><a href="https://mastodon.social/@jessicajaniuk">Jessica
|
||
Janiuk</a></li>
|
||
<li><a
|
||
href="https://mastodon.social/@develwithoutacause@techhub.social">Doug
|
||
Parker</a></li>
|
||
<li><a href="https://x.com/twerske">Emma Twersky</a></li>
|
||
<li><a href="https://x.com/marktechson">Mark Thompson</a></li>
|
||
<li><a href="https://x.com/pkozlowski_os">Pawel Kozlowski</a></li>
|
||
<li><a href="https://x.com/dylhunn">Dylan Hunn</a></li>
|
||
</ul>
|
||
<h6 id="experts">Experts</h6>
|
||
<blockquote>
|
||
<p>List of Angular experts you should follow on X (in no particular
|
||
order). This list is by no means complete.</p>
|
||
</blockquote>
|
||
<ul>
|
||
<li><a href="https://x.com/PatrickJS__"><span class="citation"
|
||
data-cites="PatrickJS__">@PatrickJS__</span></a></li>
|
||
<li><a href="https://x.com/pkozlowski_os"><span class="citation"
|
||
data-cites="pkozlowski_os">@pkozlowski_os</span></a></li>
|
||
<li><a href="https://x.com/eggheadio"><span class="citation"
|
||
data-cites="eggheadio">@eggheadio</span></a></li>
|
||
<li><a href="https://x.com/hirez_io"><span class="citation"
|
||
data-cites="hirez_io">@hirez_io</span></a></li>
|
||
<li><a href="https://x.com/cedric_exbrayat"><span class="citation"
|
||
data-cites="cedric_exbrayat">@cedric_exbrayat</span></a></li>
|
||
<li><a href="https://x.com/victorsavkin"><span class="citation"
|
||
data-cites="victorsavkin">@victorsavkin</span></a></li>
|
||
<li><a href="https://x.com/jeffbcross"><span class="citation"
|
||
data-cites="jeffbcross">@jeffbcross</span></a></li>
|
||
<li><a href="https://x.com/waterplea"><span class="citation"
|
||
data-cites="waterplea">@waterplea</span></a></li>
|
||
<li><a href="https://x.com/marsibarsi"><span class="citation"
|
||
data-cites="marsibarsi">@marsibarsi</span></a></li>
|
||
<li><a href="https://x.com/maciejtreder"><span class="citation"
|
||
data-cites="maciejtreder">@maciejtreder</span></a></li>
|
||
<li><a href="https://x.com/maartentibau"><span class="citation"
|
||
data-cites="maartentibau">@maartentibau</span></a></li>
|
||
</ul>
|
||
<h6 id="google-developer-experts"><a
|
||
href="https://developers.google.com/experts/all/technology/web-technologies">Google
|
||
Developer Experts</a></h6>
|
||
<ul>
|
||
<li><a href="https://x.com/jack_franklin">Jack Franklin</a></li>
|
||
<li><a href="https://x.com/ThierryChatel">Thierry Chatel</a></li>
|
||
<li><a href="https://x.com/urishaked">Uri Shaked</a></li>
|
||
<li><a href="https://x.com/gruizdevilla">Gonzalo Ruiz de Villa
|
||
Suárez</a></li>
|
||
<li><a href="https://x.com/sharondio">Sharon DiOrio</a></li>
|
||
<li><a href="https://x.com/John_Papa">John Papa</a></li>
|
||
<li><a href="https://x.com/danwahlin">Dan Wahlin</a></li>
|
||
<li><a href="https://x.com/christianweyer">Christian Weyer</a></li>
|
||
<li><a href="https://x.com/toddmotto">Todd Motto</a></li>
|
||
<li><a href="https://x.com/timruffles">Tim Ruffles</a></li>
|
||
<li><a href="https://x.com/manekinekko">Wassim Chegham</a></li>
|
||
<li><a href="https://x.com/js_dev">Aaron Frost</a></li>
|
||
<li><a href="https://x.com/willmendesneto">Wilson Mendes</a></li>
|
||
<li><a href="https://x.com/jaredwilli">Jared Williams</a></li>
|
||
<li><a href="https://x.com/gerardsans">Gerard Sans</a></li>
|
||
<li><a href="https://x.com/PascalPrecht">Pascal Precht</a></li>
|
||
<li><a href="https://x.com/jeffwhelpley/">Jeff Whelpley</a></li>
|
||
<li><a href="https://x.com/elecash/">Raúl Jiménez</a></li>
|
||
<li><a href="https://x.com/webmaxru">Maxim Salnikov</a></li>
|
||
<li><a href="https://x.com/deborahkurata">Deborah Kurata</a></li>
|
||
<li><a href="https://x.com/shai_reznik">Shai Reznik</a></li>
|
||
<li><a href="https://x.com/manfredsteyer">Manfred Steyer</a></li>
|
||
<li><a href="https://x.com/juristr">Juri Strumpflohner</a></li>
|
||
<li><a href="https://x.com/willgmbr">William Grasel</a></li>
|
||
<li><a href="https://x.com/AlyssaNicoll">Alyssa Nicoll</a></li>
|
||
<li><a href="https://x.com/nirkaufman">Nir kaufman</a></li>
|
||
<li><a href="https://x.com/valorkin">Dmitriy Shekhovtsov</a></li>
|
||
<li><a href="https://x.com/jeffdelaney23">Jeff Delaney</a></li>
|
||
<li><a href="https://x.com/TheNishuGoel">Nishu Goel</a></li>
|
||
<li><a href="https://x.com/waterplea">Alex Inkin</a></li>
|
||
<li><a href="https://x.com/SantoshYadavDev">Santosh Yadav</a></li>
|
||
<li><a href="https://x.com/ankitsharma_007">Ankit</a></li>
|
||
<li><a href="https://x.com/SiddAjmera">Siddharth Ajmera</a></li>
|
||
<li><a href="https://x.com/codewith_ahsan">Muhammad Ahsan Ayaz</a></li>
|
||
<li><a href="https://x.com/DecodedFrontend">Dmytro Mezhenskyi</a></li>
|
||
<li><a href="https://x.com/Michael_Hladky">Michael Hladky</a></li>
|
||
<li><a href="https://x.com/biondifabio">Fabio Biondi</a></li>
|
||
<li><a href="https://x.com/laforge_toma">Thomas Laforge</a></li>
|
||
<li><a href="https://x.com/codewith_ahsan">codewith_ahsan</a></li>
|
||
</ul>
|
||
<hr />
|
||
<h4 id="learning">Learning</h4>
|
||
<h5 id="blogs">Blogs</h5>
|
||
<ul>
|
||
<li><a href="https://angularexperts.io/blog">angular experts</a> - Learn
|
||
all about Angular, NgRx, RxJS & NX and advance your skills with
|
||
guides, in-depth content and actionable tips and tricks!</li>
|
||
<li><a href="https://blog.angular-university.io/">angular-university</a>
|
||
- Learn and Keep Up with the Angular Ecosystem.</li>
|
||
<li><a href="https://blog.simplified.courses/">simplified courses</a> -
|
||
Blog articles written with love, just for you!</li>
|
||
<li><a href="https://justangular.com/">just angular</a> - Shares the
|
||
newest and most important updates about Angular, along with useful tips
|
||
and tricks.</li>
|
||
<li><a href="https://angular.love/">angular.love</a> - (Polish)
|
||
Excellent up-to-date resource for Angular.</li>
|
||
<li><a href="https://www.angularminds.com/blog">angular minds</a></li>
|
||
<li><a href="https://www.angulararchitects.io/en/blog/">angular
|
||
architects</a></li>
|
||
<li><a href="https://houseofangular.io/blog/">house of angular</a></li>
|
||
<li><a href="https://www.thisdot.co/blog?tags=angular">thisdot
|
||
labs</a></li>
|
||
<li><a href="https://blogs.halodoc.io/tag/angular-2-2/">halodoc</a></li>
|
||
<li><a href="https://blog.ninja-squad.com/">ninja-squad</a></li>
|
||
<li><a href="https://marmicode.io/learn/everything">marmicode</a></li>
|
||
<li><a href="https://medium.com/@netbasal">Netanel Basal</a></li>
|
||
<li><a href="https://timdeschryver.dev/">Tim Deschryver</a></li>
|
||
<li><a href="https://nartc.me/">Chau Tran</a></li>
|
||
<li><a href="https://blog.mgechev.com/">Minko Gechev</a></li>
|
||
<li><a href="https://riegler.fr/">Matthieu Riegler</a></li>
|
||
<li><a href="https://medium.com/@thomas.laforge">Thomas Laforge</a></li>
|
||
<li><a href="https://medium.com/@rainer-hahnekamp">Rainer
|
||
Hahnekamp</a></li>
|
||
<li><a href="https://medium.com/@eugeniyoz">Evgeniy Oz</a></li>
|
||
<li><a href="https://tomastrajan.medium.com/">Tomas Trajan</a></li>
|
||
<li><a href="https://blog.katsuba.dev/">Igor Katsuba</a></li>
|
||
<li><a href="https://www.ngserve.io/">ng serve</a></li>
|
||
<li><a href="https://ducin.dev/blog">Tomasz Ducin</a></li>
|
||
<li><a href="https://dev.to/this-is-angular">This is Angular</a></li>
|
||
<li><a href="https://app.daily.dev/tags/angular">daily.dev</a></li>
|
||
<li><a href="https://offering.solutions/blog/">Offering
|
||
Solutions</a></li>
|
||
<li><a href="https://danielk.tech/">Daniel Kreider</a></li>
|
||
<li><a href="https://www.amadousall.com/">Amadou Sall</a></li>
|
||
<li><a href="https://github.com/tomavic/angular-philosophies">Angular
|
||
Philosophies</a></li>
|
||
<li><a href="https://medium.com/@maks-dolgikh">Maksim Dolgikh</a></li>
|
||
<li><a href="https://playfulprogramming.com/">Playful
|
||
Programming</a></li>
|
||
<li><a href="https://angular-material.dev/home">Angular Material Dev</a>
|
||
- One place for everything related to Material Design in Angular.</li>
|
||
<li><a href="https://www.codewithomkar.com/">Code With Omkar</a></li>
|
||
<li><a href="https://ngtips.com/">Angular Tips</a> - Best practices and
|
||
recommendations for building complex, large and maintainable
|
||
applications with Angular.</li>
|
||
<li><a href="https://practical-angular.donaldmurillo.com/">Practical
|
||
Angular Guide</a> - Real-world-ish solutions for Angular developers By
|
||
<a href="https://github.com/DonaldMurillo">Donald Murillo</a>.</li>
|
||
</ul>
|
||
<h5 id="books">Books</h5>
|
||
<ul>
|
||
<li><a
|
||
href="https://www.packtpub.com/en-us/search?query=angular&sort=best-selling">Packt
|
||
Publishing</a> - Your best option to find the largest variety of
|
||
up-to-date programming books.</li>
|
||
<li><a
|
||
href="https://gumroad.com/software-development/web-development/javascript?tags=angular">GumRoad</a>
|
||
- Various Free and Paid Angular ebooks.</li>
|
||
<li><a
|
||
href="https://leanpub.com/bookstore?type=all&search=angular">LeanPub</a>
|
||
- LeanPub has variable pricing so you can support authors as you see
|
||
fit.</li>
|
||
<li><a href="https://www.manning.com/">Manning</a> - Buy a Manning pBook
|
||
anywhere, get the eBook free here.</li>
|
||
<li><a href="https://books.ninja-squad.com/angular">Become a ninja with
|
||
Angular</a> - <code>Ninja Squad</code></li>
|
||
<li><a href="https://angular-buch.com/">Angular-Buch (German)</a> -
|
||
<code>dpunkt.verlag</code></li>
|
||
<li><a href="https://codewithahsan.dev/ng-book">Angular Cookbook - 80+
|
||
Recipes to enhance your Angular skills for enterprises</a> -
|
||
<code>Packt Publishing</code></li>
|
||
<li><a href="https://angular-university.io/my-ebooks">Angular University
|
||
Ebooks</a> - Available separately or included with a subscription.</li>
|
||
<li><a href="https://angularexperts.io/products/ebook-signals">Angular
|
||
Signals Masterclass</a> - <code>Kevin Kreuzer</code></li>
|
||
<li><a href="https://www.amazon.com/dp/B0FF9LSHJN/">Mastering Angular
|
||
Signals: A Practical Guide to Modern Reactivity, Performance, and
|
||
Migration</a> - <code>Muhammad Ahsan Ayaz</code></li>
|
||
<li><a href="https://github.com/DenysVuika/angular-book">Angular
|
||
Book</a> - <code>Denys Vuika</code> <strong>FREE</strong></li>
|
||
<li><a
|
||
href="https://www.angulararchitects.io/en/ebooks/modern-angular/?book">Modern
|
||
Angular</a> - <code>Manfred Steyer</code> <strong>FREE</strong></li>
|
||
<li><a
|
||
href="https://houseofangular.io/the-ultimate-guide-to-angular-evolution/">Ultimate
|
||
Guide to Angular Evolution</a> - <code>House of Angular</code>
|
||
<strong>FREE</strong></li>
|
||
<li><a
|
||
href="https://www.angulararchitects.io/en/ebooks/micro-frontends-and-moduliths-with-angular/">Micro
|
||
Frontends and Moduliths with Angular</a> - <code>Manfred Steyer</code>
|
||
<strong>FREE</strong></li>
|
||
<li><a
|
||
href="https://christianlydemann.com/angular-mastery-book/">Angular
|
||
Mastery</a> - <code>CHRISTIAN LÜDEMANN</code> <strong>FREE</strong></li>
|
||
<li><a href="https://go.nx.dev/angular-patterns-ebook">Enterprise
|
||
Monorepo Angular Patterns</a> - <code>Nx Core Team</code>
|
||
<strong>FREE</strong></li>
|
||
</ul>
|
||
<h5 id="certification">Certification</h5>
|
||
<ul>
|
||
<li><a href="https://certificates.dev/angular">Certificates.dev</a> -
|
||
Obtain your Certification of Competence as an Angular Developer.</li>
|
||
<li><a
|
||
href="https://www.angularacademy.ca/angular-certification">Angular
|
||
Academy CA</a> - Angular Academy is the #1 provider of hands-on
|
||
instructor-led classroom training in Canada!</li>
|
||
<li><a
|
||
href="https://www.hackerrank.com/skills-verification/angular_basic">Hackerrank</a>
|
||
- Angular (Basic) Skills Certification Test.</li>
|
||
<li><a href="https://www.edureka.co/angular-training">Edureka</a> -
|
||
Angular Certification Course Online.</li>
|
||
<li><a
|
||
href="https://www.koenig-solutions.com/angularjs-training-certification-courses">Koenig</a>
|
||
- Various courses cover Angular separately or full-stack.</li>
|
||
<li><a
|
||
href="https://www.simplilearn.com/angular-certification-training-course">Simplilearn</a>
|
||
- Angular Certification Training Course</li>
|
||
<li><a
|
||
href="https://altitudecsi.org/products/angular-certification-program">Altitude
|
||
CSI</a> - Angular Certification Program.</li>
|
||
</ul>
|
||
<h5 id="cheatsheet">Cheatsheet</h5>
|
||
<ul>
|
||
<li><a href="https://v17.angular.io/guide/cheatsheet">Past Angular
|
||
Cheatsheet</a> - Note: <em>NEW</em> official docs do not have a
|
||
cheatsheet.</li>
|
||
<li><a
|
||
href="https://github.com/sudheerj/angular-interview-questions">List of
|
||
100 Angular Interview questions and answers</a></li>
|
||
<li><a href="https://roadmap.sh/angular">Angular Developer
|
||
Roadmap</a></li>
|
||
<li><a
|
||
href="https://www.interviewbit.com/angular-cheat-sheet/">Interviewbit
|
||
Angular Cheatsheet</a></li>
|
||
<li><a
|
||
href="https://zerotomastery.io/cheatsheets/angular-cheat-sheet/">ZeroToMastery
|
||
Angular Cheatsheet</a></li>
|
||
<li><a
|
||
href="https://playfulprogramming.com/collections/framework-field-guide">Framework
|
||
Field Guide</a> - A free and practical way to learn Angular, React &
|
||
Vue all at once.</li>
|
||
<li><a href="https://cookbook.marmicode.io/">Marmicode Cookbook</a> -
|
||
Ingredients & Recipes for Cooking Delicious Apps.</li>
|
||
<li><a
|
||
href="https://github.com/Devinterview-io/angular-interview-questions">angular-interview-questions</a>
|
||
- Angular interview questions and answers to help you prepare for your
|
||
next technical interview in 2025.</li>
|
||
</ul>
|
||
<h5 id="exercises">Exercises</h5>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/MarkTechson/angular-fundamentals-lessons">angular-fundamental-lessons</a></li>
|
||
<li><a href="https://angular-challenges.vercel.app/">Angular
|
||
Challenges</a> - This repository gathers 50+ challenges related to
|
||
Angular, Nx, RxJS, NgRx, and Typescript. These challenges revolve around
|
||
real-life issues or specific features to elevate your skills.</li>
|
||
<li><a
|
||
href="https://codelabs.developers.google.com/?text=angular">Codelabs</a>
|
||
- Google Developers Codelabs provide a guided, tutorial, hands-on coding
|
||
experience. Most codelabs will step you through the process of building
|
||
a small application, or adding a new feature to an existing
|
||
application.</li>
|
||
<li><a href="https://www.rxjs-fruits.com/subscribe">rxjs-fruits</a> -
|
||
Interactive lessons covering a range of operators in RxJS.</li>
|
||
<li><a
|
||
href="https://github.com/ppsdang/angular-debugging-challenge">angular-debugging-challenge</a>
|
||
- This repository hosts an Angular-based project designed as a coding
|
||
and debugging exercise.</li>
|
||
<li><a
|
||
href="https://github.com/ppsdang/angular-api-challenge">angular-api-challenge</a>
|
||
- This repository hosts an Angular-based project designed as a api
|
||
integration exercise.</li>
|
||
<li><a
|
||
href="https://github.com/kobi-hari-courses/modern-angular-exercises">modern-angular-exercises</a>
|
||
- Exercises on various Angular topics, including solutions and solution
|
||
videos.</li>
|
||
<li><a
|
||
href="https://github.com/angular-courses-lab/angular-debug-quest">angular-debug-quest</a>
|
||
- Sharpen your skills at fixing bugs in Angular applications for a
|
||
better understanding of the framework.</li>
|
||
</ul>
|
||
<h5 id="online-training">Online Training</h5>
|
||
<ul>
|
||
<li><a href="https://angularstart.com/">Angular Start</a> - Learn to
|
||
build professional-grade Angular applications using new features with
|
||
modern best practices.</li>
|
||
<li><a href="https://www.angulartraining.com/">Angular Training</a> -
|
||
The Angular Coach You Need.</li>
|
||
<li><a href="https://angular-university.io/">Angular University</a> -
|
||
Learn And Keep Up With The Angular Ecosystem.</li>
|
||
<li><a href="https://ultimatecourses.com/courses/angular">Ultimate
|
||
Courses</a> - Everything you need to become an Angular expert.</li>
|
||
<li><a href="https://www.angularacademy.ca/">Angular Academy</a> -
|
||
World-class instructor-led live online Angular courses!</li>
|
||
<li><a href="https://www.simplified.courses/angular-training">Simplified
|
||
Courses</a> - Angular Training by Expert Brecht Billiet!</li>
|
||
<li><a
|
||
href="https://www.eventbrite.fr/o/younes-jaaidi-marmicode-29329031085">Marmicode</a></li>
|
||
<li><a
|
||
href="https://www.udemy.com/course/the-complete-guide-to-angular-2">Angular
|
||
- The Complete Guide</a></li>
|
||
<li><a href="https://offering.solutions/trainings/">Offering
|
||
Solutions</a></li>
|
||
<li><a href="https://liveloveapp.com/">liveloveapp</a> - Workshops are
|
||
available for Cypress, NgRx, RxJS, AG Grid and web performance.</li>
|
||
<li><a
|
||
href="https://angular-material.dev/courses/overview/m3-ng-components">Angular
|
||
Material 3 Theming System: Complete Guide</a> - The only course you will
|
||
need for Angular Material 3 Theming.</li>
|
||
<li><a href="https://angular-ui.com/">Angular UI</a> - Get ready to
|
||
build your next web application using Angular with interactive courses
|
||
and exercises.</li>
|
||
<li><a href="https://www.learnbydo.ing/">learnbydo.ing</a> - Learn {Web}
|
||
programming with Courses, Books & Exercises from <a
|
||
href="https://www.fabiobiondi.dev/video-courses/">Fabio Biondi</a>.
|
||
Content either in Italian or English.</li>
|
||
<li><a href="https://tech-os.org/">Tech OS</a> - Tech OS offers
|
||
high-level Angular training designed for demanding developers and
|
||
ambitious teams.</li>
|
||
<li><a href="https://ng.guide/">ng.guide</a> - Learn Angular by building
|
||
real-world apps.</li>
|
||
</ul>
|
||
<h5 id="on-site-training">On-Site Training</h5>
|
||
<ul>
|
||
<li><a href="https://angularbootcamp.com">Angular Boot Camp</a></li>
|
||
<li><a href="https://angular.schule/">Angular.Schule (in
|
||
Germany)</a></li>
|
||
<li><a href="https://angular.de/schulungen/angular-intensiv/">Angular.DE
|
||
(Germany)</a></li>
|
||
<li><a
|
||
href="https://workshops.de/seminare-schulungen-kurse/angular-typescript/">Workshops.DE
|
||
(Germany)</a></li>
|
||
<li><a href="https://www.simplified.courses/angular-training">Simplified
|
||
Courses</a> - Angular Training by Expert Brecht Billiet!</li>
|
||
<li><a href="https://offering.solutions/trainings/">Offering
|
||
Solutions</a></li>
|
||
<li><a href="https://liveloveapp.com/">liveloveapp</a> - Workshops are
|
||
available for Cypress, NgRx, RxJS, AG Grid and web performance.</li>
|
||
</ul>
|
||
<h5 id="youtube-channels">YouTube Channels</h5>
|
||
<ul>
|
||
<li><a href="https://www.youtube.com/@Angular">Angular</a></li>
|
||
<li><a href="https://www.youtube.com/@ngconfonline">NG CONF</a></li>
|
||
<li><a href="https://www.youtube.com/@procademy">Procademy</a></li>
|
||
<li><a
|
||
href="https://www.youtube.com/@MonsterlessonsAcademy">Monsterlessons
|
||
Academy</a></li>
|
||
<li><a href="https://www.youtube.com/@JoshuaMorony">Joshua
|
||
Morony</a></li>
|
||
<li><a href="https://www.youtube.com/@NihiraTechiees">Nihira
|
||
Techiees</a></li>
|
||
<li><a href="https://www.youtube.com/@AngularUniversity">Angular
|
||
University</a></li>
|
||
<li><a href="https://www.youtube.com/@RainerHahnekamp">Rainer
|
||
Hahnekamp</a></li>
|
||
<li><a href="https://www.youtube.com/@CodeShotsWithProfanis">Code Shots
|
||
With Profanis</a></li>
|
||
<li><a href="https://www.youtube.com/@deborah_kurata">Deborah
|
||
Kurata</a></li>
|
||
<li><a
|
||
href="https://www.youtube.com/@BrandonRobertsDev">BrandonRobertsDev</a></li>
|
||
<li><a href="https://www.youtube.com/@DecodedFrontend">Decoded
|
||
Frontend</a></li>
|
||
<li><a
|
||
href="https://www.youtube.com/@galaxies_dev">Galaxies_dev</a></li>
|
||
<li><a href="https://www.youtube.com/@ZoaibKhan">Zoaib Khan</a></li>
|
||
<li><a href="https://www.youtube.com/@AyyazTech">AyyazTech</a></li>
|
||
<li><a href="https://www.youtube.com/@nivekDev">NivekDev</a></li>
|
||
<li><a href="https://www.youtube.com/@LeelaWebDev">LeelaWebDev</a></li>
|
||
<li><a href="https://www.youtube.com/@WebTechTalk">WebTechTalk</a></li>
|
||
<li><a href="https://www.youtube.com/@babatundelmd">Babatunde
|
||
Lamidi</a></li>
|
||
<li><a
|
||
href="https://www.youtube.com/@techstacknation">TechStackNation</a></li>
|
||
<li><a href="https://www.youtube.com/@angularlove">Angular Love</a></li>
|
||
<li><a href="https://www.youtube.com/@ng-news">NG NEWS</a></li>
|
||
<li><a href="https://www.youtube.com/@LearningPartnerDigital">Learning
|
||
Partner</a></li>
|
||
<li><a href="https://www.youtube.com/@codedeck">Code Deck</a></li>
|
||
<li><a href="https://www.youtube.com/@theigorsedov">Igor Sedov</a></li>
|
||
<li><a href="https://www.youtube.com/@DemystifyFrontend">Demystify
|
||
Frontend</a></li>
|
||
<li><a href="https://www.youtube.com/@TheCodeAngle">The Code
|
||
Angle</a></li>
|
||
<li><a href="https://www.youtube.com/@briantreese">Brian Treese</a></li>
|
||
<li><a href="https://www.youtube.com/@jsgigs4909">JSgigs</a></li>
|
||
<li><a href="https://www.youtube.com/@kobihari">Kobi Hari</a></li>
|
||
<li><a href="https://www.youtube.com/@programmingpracticals">Programming
|
||
Practicals</a></li>
|
||
<li><a href="https://www.youtube.com/@StartupAngular">StartupAngular</a>
|
||
- (Japanese)</li>
|
||
<li><a href="https://www.youtube.com/@codewithkeys">Code with Keys</a> -
|
||
(Persian)</li>
|
||
</ul>
|
||
<h5 id="style-guides">Style Guides</h5>
|
||
<ul>
|
||
<li><a href="https://angular.dev/style-guide">Official Angular style
|
||
guide</a></li>
|
||
<li><a
|
||
href="https://infinum.com/handbook/frontend/angular/introduction">Infinum</a></li>
|
||
<li><a
|
||
href="https://mkosir.github.io/typescript-style-guide/">TypeScript style
|
||
guide</a></li>
|
||
</ul>
|
||
<hr />
|
||
<h4 id="accessibility">Accessibility</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://digital.gov/guides/accessibility-for-teams/">digital.gov</a>
|
||
- Accessibility for teams guide from USA government.</li>
|
||
<li><a href="https://www.w3.org/WAI/">WAI</a> - The W3C Web
|
||
Accessibility Initiative (WAI) develops standards and support materials
|
||
to help you understand and implement accessibility.</li>
|
||
<li><a href="https://webaim.org/">webaim</a> - Web accessibility in
|
||
mind.</li>
|
||
<li><a href="https://wave.webaim.org/">WAVE</a> - WAVE Web Accessibility
|
||
Evaluation Tools.</li>
|
||
<li><a
|
||
href="https://marketplace.visualstudio.com/items?itemName=deque-systems.vscode-axe-linter">axe
|
||
Accessibility Linter</a> - Accessibility linting for HTML, Angular,
|
||
React, Markdown, Vue, and React Native.</li>
|
||
<li><a href="https://material.angular.io/cdk/a11y/overview">Angular
|
||
Material CDK - a11y</a> - The a11y package provides a number of tools to
|
||
improve accessibility.</li>
|
||
<li><a href="https://primeng.org/guides/accessibility">PrimeNG</a> -
|
||
PrimeNG accessibility guide.</li>
|
||
<li><a
|
||
href="https://github.com/verto-health/astral-accessibility">astral-accessibility</a>
|
||
- An open-source accessibility widget written in Angular.</li>
|
||
<li><a
|
||
href="https://github.com/angular-a11y/angular-vlibras">angular-vlibras</a>
|
||
- An Angular library that integrates the VLibras accessibility widget
|
||
into your Angular applications. VLibras provides automatic translation
|
||
of digital content into the Brazilian Sign Language (Libras), increasing
|
||
accessibility for users.</li>
|
||
<li><a
|
||
href="https://github.com/gagdmac/a11y-accessibility-first">a11y-accessibility-first</a>
|
||
- An Angular template compliant with WCAG 2.2, incorporating an
|
||
accessibility component to enhance overall accessibility in your
|
||
project.</li>
|
||
<li><a
|
||
href="https://github.com/ShakeelKadri/ngx-accessible-ui">ngx-accessible-ui</a>
|
||
- Accessible Navigation & Menu Directives for Angular 9+. Directives
|
||
comply with WCAG 2.1 Level AA and the European Accessibility Act 2025,
|
||
ensuring a highly inclusive web experience.</li>
|
||
<li><a href="https://github.com/richpauly13/easy">easy</a> -
|
||
<strong>E</strong>asy <strong>A</strong>ngular <strong>S</strong>tyles
|
||
with a11<strong>Y</strong>.</li>
|
||
</ul>
|
||
<h4 id="ai">AI</h4>
|
||
<ul>
|
||
<li><a href="https://angular.dev/ai">Official web page</a></li>
|
||
<li><a href="https://github.com/angular/examples"><span class="citation"
|
||
data-cites="angular/examples">@angular/examples</span></a> - Angular
|
||
Examples using <a
|
||
href="https://firebase.google.com/docs/genkit">GenKit</a> and <a
|
||
href="https://cloud.google.com/vertex-ai">Vertex AI</a>.</li>
|
||
<li><a href="https://workik.com/angular-code-generator">Workik</a> -
|
||
Free AI-Powered Angular code generator | Your Context-Driven AI
|
||
Partner!</li>
|
||
<li><a href="https://www.builder.io/blog/figma-to-angular">Figma to
|
||
Angular</a> - Convert Designs to Clean Angular Code in a Click.</li>
|
||
<li><a
|
||
href="https://www.zipy.ai/online-tools/ai-angular-code-generator">Zipy</a>
|
||
- AI Angular Code Generator.</li>
|
||
<li><a
|
||
href="https://github.com/DurgeshRathod/ai-test-gen-angular">ai-test-gen-angular</a>
|
||
- A powerful tool that leverages OpenAI’s advanced capabilities to
|
||
automate the generation of unit tests for your Angular components and
|
||
services.</li>
|
||
<li><a
|
||
href="https://www.yeschat.ai/gpts-ZxX35UdX-Angular-Ninja-%F0%9F%A5%B7">Yes
|
||
Chat AI</a> - Angular Ninja - Angular Development Assistant.</li>
|
||
<li><a href="https://theresanaiforthat.com/s/angular/">theres an ai for
|
||
that</a> - #1 AI aggregator. Updated daily. Used by 20M+.</li>
|
||
<li><a href="https://www.whatplugin.ai/gpts/angular-copilot">what
|
||
plugin</a> - Angular copilot.</li>
|
||
<li><a
|
||
href="https://github.com/gsans/mini-bard-palm2-angular">mini-bard-palm2-angular</a>
|
||
- Result from this <a
|
||
href="https://medium.com/google-cloud/build-ai-powered-angular-apps-with-google-gemini-5bf5e905ca1d#f02a">step
|
||
by step guide</a> on how to integrate Google Gemini with Angular.</li>
|
||
<li><a
|
||
href="https://github.com/mgechev/gemini-angular-drawing-demo">gemini-angular-drawing-demo</a>
|
||
- Developer sample written in Angular demonstrating Gemini multimodal
|
||
(image and audio) input and understanding. The user enters a prompt and
|
||
the app generates images via VertexAI’s image generation which the user
|
||
can after that preview in a three-dimensional gallery.</li>
|
||
<li><a
|
||
href="https://alan.app/docs/tutorials/web/integrating-angular-app/">Alan
|
||
AI</a> - Build a voice agent for an Angular app.</li>
|
||
<li><a
|
||
href="https://vishugosain.hashnode.dev/integrating-open-ai-into-angular-application">Vishal
|
||
Gosain Hashnode</a> - Integrate OpenAI into an Angular app.</li>
|
||
<li><a
|
||
href="https://github.com/c-o-l-i-n/ng-generative-ai-demo">ng-generative-ai-demo</a>
|
||
- Result from this <a
|
||
href="https://colinaw.com/blog/angular-ai-chatbot/">angular-ai-chatbot
|
||
tutorial</a>.</li>
|
||
<li><a href="https://aitools.fyi/technology/angular">aitools.fyi</a> -
|
||
AI Tools Built With Angular.</li>
|
||
<li><a
|
||
href="https://github.com/google-gemini/angular-webxr-art-sample">angular-webxr-art-sample</a>
|
||
- A WebXR Gallery that creates Generative AI images using <a
|
||
href="https://cloud.google.com/vertex-ai/generative-ai/docs/image/overview">Vertex
|
||
AI Image Generation</a> and creates captioning using <a
|
||
href="https://cloud.google.com/vertex-ai/generative-ai/docs/multimodal/overview#multimodal_models">Gemini
|
||
Multimodel API</a>.</li>
|
||
<li><a href="https://www.globalseo.ai/integrations/angular">global
|
||
seo</a> - Translate Angular app with AI.</li>
|
||
<li><a
|
||
href="https://github.com/OvidijusParsiunas/deep-chat">deep-chat</a> -
|
||
Fully customizable AI chatbot component for your website.</li>
|
||
<li><a
|
||
href="https://github.com/slsfi/abbi-ng-ai-image-descriptor">abbi-ng-ai-image-descriptor</a>
|
||
- Angular web app for AI-generated image descriptions. You need an
|
||
OpenAI API key to use the tool.</li>
|
||
<li><a href="https://app.webcrumbs.ai/frontend-ai">Frontend AI</a> - Ask
|
||
for a component or upload an image, and instantly receive ready-to-use
|
||
code without lifting a finger.</li>
|
||
<li><a href="https://designshift.dev/">Design Shift</a> - Generate
|
||
Angular components you want from <a href="https://uizard.io/">Uizard</a>
|
||
layouts.</li>
|
||
<li><a href="https://ui2code.ai/">UI2CODE</a> - UI to Code Converter in
|
||
seconds with AI.</li>
|
||
<li><a
|
||
href="https://purecode.ai/components/angular/application-ui">PureCode
|
||
AI</a> - Build Angular Application UIs 50% faster with PureCode AI.</li>
|
||
<li><a href="https://www.augmentcode.com/">augment code</a> - The first
|
||
AI coding assistant built for professional software engineers and large
|
||
codebases.</li>
|
||
<li><a
|
||
href="https://github.com/gergelyszerovay/ai-friendly-docs">ai-friendly-docs</a>
|
||
- This repository offers Angular documentation specifically optimized
|
||
for AI, making it highly accessible to Large Language Models (LLMs) and
|
||
enhancing their response quality.</li>
|
||
<li><a
|
||
href="https://github.com/tecnomanu/agent-rules-kit">agent-rules-kit</a>
|
||
- A CLI tool that facilitates the installation and configuration of
|
||
rules for Cursor AI, the AI-powered IDE. The rules help AI agents better
|
||
understand the structure, patterns, and best practices of different
|
||
technology stacks.</li>
|
||
<li><a href="https://github.com/liveloveapp/hashbrown">hashbrown</a> -
|
||
<a href="https://hashbrown.dev/">Hashbrown</a> is a framework for
|
||
building joyful, AI-powered user experiences.</li>
|
||
<li><a
|
||
href="https://github.com/kd-akshay/code-quality-analyzer">CodeSage
|
||
AI</a> - Analyzes code quality of React, Vue, and Angular projects using
|
||
linters and an LLM.</li>
|
||
<li><a
|
||
href="https://github.com/SAIPRANAY-GANGULA/angular-mcp-server">angular-mcp-server</a>
|
||
- A Model Context Protocol (MCP) server that provides comprehensive
|
||
access to Angular documentation, enabling AI assistants to search and
|
||
retrieve Angular-related information with intelligent relevance
|
||
scoring.</li>
|
||
<li><a href="https://gitingest.com/">gitingest</a> - Turn any Git
|
||
repository into a simple text digest of its codebase. This is useful for
|
||
feeding a codebase into any LLM.</li>
|
||
<li><a href="https://github.com/upstash/context7">context7</a> -
|
||
Context7 MCP Server – Up-to-date code documentation for LLMs and AI code
|
||
editors.</li>
|
||
</ul>
|
||
<h4 id="analytics">Analytics</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://help.heap.io/data-management/code-and-framework-management/using-heap-with-popular-web-frameworks-libraries/#angular">Heap</a>
|
||
- Heap is the only digital insights platform that gives you complete
|
||
understanding of your customers’ digital journeys, so you can quickly
|
||
improve conversion, retention, and customer delight.</li>
|
||
<li><a href="https://www.npmjs.com/package/ngx-tableau">ngx-tableau</a>
|
||
- <code>ngx-tableau</code> is an Angular module that allows you to embed
|
||
a Tableau report in an Angular webapp.</li>
|
||
<li><a
|
||
href="https://github.com/EmmanuelRoux/ngx-matomo-client">ngx-matomo-client</a>
|
||
- Matomo analytics client for Angular applications.</li>
|
||
<li><a
|
||
href="https://github.com/angulartics/angulartics2">angulartics2</a> -
|
||
Vendor-agnostic analytics for Angular2 applications.</li>
|
||
<li><a
|
||
href="https://github.com/mzuccaroli/angular-google-tag-manager">angular-google-tag-manager</a>
|
||
- A service library for integrate google tag manager in your Angular
|
||
project.</li>
|
||
<li><a href="https://github.com/Litlyx/litlyx">litlyx</a> - The easiest
|
||
dev-centric analytics tool. Litlyx is an open-source analytics solution
|
||
for any JavaScript framework. Setup takes less then 30 seconds and just
|
||
one line of code!</li>
|
||
<li><a href="https://github.com/plausible/analytics">plausible</a> -
|
||
Simple, open source, lightweight (< 1 KB) and privacy-friendly web
|
||
analytics alternative to Google Analytics. Works without any extra
|
||
configuration on <a href="https://plausible.io/docs/spa-support">single
|
||
page applications</a>.</li>
|
||
<li><a
|
||
href="https://github.com/blue-cardinal/ngx-google-analytics"><span
|
||
class="citation"
|
||
data-cites="blue-cardinal/ngx-google-analytics">@blue-cardinal/ngx-google-analytics</span></a>
|
||
- This package provides a module that injects the Google Analytics tag
|
||
manager script into your Angular project. It provides some guard rails
|
||
against including the tag manager script in a dev environment.</li>
|
||
<li><a
|
||
href="https://github.com/Progressive-Insurance/oculr-ngx">oculr-ngx</a>
|
||
- An analytics library that makes collecting data in an Angular app
|
||
simple.</li>
|
||
<li><a href="https://github.com/jadengis/ngx-clarity">ngx-clarity</a> -
|
||
A useful Angular library that automatically injects the script tag
|
||
required to use <a href="https://clarity.microsoft.com/">Microsoft
|
||
Clarity</a>.</li>
|
||
<li><a
|
||
href="https://github.com/PiwikPRO/ngx-piwik-pro">ngx-piwik-pro</a> -
|
||
Dedicated <a href="https://piwik.pro/">Piwik PRO</a> library that helps
|
||
with implementing Piwik PRO Tag Manager and the Piwik PRO tracking
|
||
client in Angular applications.</li>
|
||
<li><a
|
||
href="https://github.com/Service-Soft/ngx-material-tracking">ngx-material-tracking</a>
|
||
- Provides gdpr-compliant tracking functionality for Angular websites.
|
||
Google Analytics and Meta Pixel are supported out of the box, but you
|
||
are also able to build your own tracking.</li>
|
||
<li><a
|
||
href="https://github.com/opendecide/ngx-segment-analytics">ngx-segment-analytics</a>
|
||
- Provides an API for <a
|
||
href="https://github.com/segmentio/analytics-next/">Segment</a>.</li>
|
||
<li><a
|
||
href="https://github.com/Szymonexis/ngx-meta-pixel">ngx-meta-pixel</a> -
|
||
This package enables you to setup <a
|
||
href="https://www.facebook.com/business/tools/meta-pixel">Meta Pixel</a>
|
||
for your Angular application.</li>
|
||
<li><a
|
||
href="https://github.com/aws-solutions/clickstream-analytics-on-aws-web-sdk">clickstream-analytics-on-aws-web-sdk</a>
|
||
- <a
|
||
href="https://aws-solutions.github.io/clickstream-analytics-on-aws/en/latest/sdk-manual/web/">Clickstream
|
||
Web SDK</a> can help you easily collect click stream data from browser
|
||
to your AWS environments through the data pipeline provisioned by this
|
||
solution.</li>
|
||
<li><a href="https://www.npmjs.com/package/@luzmo/ngx-embed"><span
|
||
class="citation"
|
||
data-cites="luzmo/ngx-embed">@luzmo/ngx-embed</span></a> - A library for
|
||
embedding <a href="https://www.luzmo.com/">Luzmo</a> dashboards in your
|
||
Angular application.</li>
|
||
<li><a
|
||
href="https://github.com/jufab/opentelemetry-angular-interceptor">opentelemetry-angular-interceptor</a>
|
||
- A library to deploy <a
|
||
href="https://opentelemetry.io/">OpenTelemetry</a> in your Angular
|
||
application.</li>
|
||
<li><a
|
||
href="https://github.com/WebDataRocks/ng-webdatarocks">ng-webdatarocks</a>
|
||
- This repository contains the source code of the Angular wrapper for <a
|
||
href="https://www.webdatarocks.com/">WebDataRocks</a>. Follow this <a
|
||
href="https://github.com/WebDataRocks/pivot-angular">example</a> to
|
||
integrate the WebDataRocks web reporting tool.</li>
|
||
<li><a
|
||
href="https://github.com/th3n00bc0d3r/ngx-amplitude">ngx-amplitude</a> -
|
||
A library that provides an easy-to-use interface for integrating <a
|
||
href="https://amplitude.com/">Amplitude</a> analytics into your Angular
|
||
18+ standalone applications. It includes a global initialization module
|
||
and a service for logging events.</li>
|
||
</ul>
|
||
<h4 id="authentication">Authentication</h4>
|
||
<ul>
|
||
<li><a href="https://www.agilicus.com/">Agilicus</a> - Single sign-on
|
||
for any user—first party, third party, joint venture, contractor, or
|
||
vendor. Enforce multi-factor authentication everywhere. These are
|
||
various <a href="https://github.com/Agilicus/samples">samples of
|
||
integrations</a> to the Agilicus Platform.</li>
|
||
<li><a
|
||
href="https://github.com/damienbod/angular-auth-oidc-client">angular-auth-oidc-client</a>
|
||
- NPM package for OpenID Connect, OAuth Code Flow with PKCE, Refresh
|
||
tokens, and Implicit Flow.</li>
|
||
<li><a
|
||
href="https://github.com/manfredsteyer/angular-oauth2-oidc">angular-oauth2-oidc</a>
|
||
- Support for OAuth 2 and OpenId Connect (OIDC) in Angular.</li>
|
||
<li><a
|
||
href="https://github.com/nikosanif/angular-authentication">angular-authentication</a>
|
||
- An Angular application that demonstrates best practices for user
|
||
authentication & authorization flows.</li>
|
||
<li><a href="https://github.com/angular/angularfire">angularfire</a> -
|
||
Angular + Firebase.</li>
|
||
<li><a
|
||
href="https://github.com/abacritt/angularx-social-login">angularx-social-login</a>
|
||
- Social login and authentication module for Angular 17.</li>
|
||
<li><a href="https://github.com/auth0/angular2-jwt">angular2-jwt</a> -
|
||
Helper library for handling JWTs in Angular apps.</li>
|
||
<li><a href="https://github.com/appwrite/appwrite">appwrite</a> - Using
|
||
Appwrite, you can easily integrate your <a
|
||
href="https://appwrite.io/docs/quick-starts/angular">Angular app</a>
|
||
with user authentication and multiple sign-in methods, a database for
|
||
storing and querying users and team data, storage and file management,
|
||
image manipulation, cloud functions, and more services.</li>
|
||
<li><a href="https://github.com/auth0/auth0-angular">auth0-angular</a> -
|
||
Auth0 SDK for Angular Single Page Applications.</li>
|
||
<li><a
|
||
href="https://github.com/Badisi/auth-js/tree/main/libs/ngx-auth"><span
|
||
class="citation"
|
||
data-cites="badisi/ngx-auth">@badisi/ngx-auth</span></a> -
|
||
Authentication and authorization support for Angular based desktop and
|
||
mobile applications.</li>
|
||
<li><a
|
||
href="https://github.com/stalniy/casl/tree/master/packages/casl-angular">casl-angular</a>
|
||
- Module which integrates isomorphic permissions management library <a
|
||
href="https://github.com/stalniy/casl">CASL</a> with Angular.</li>
|
||
<li><a href="https://www.corbado.com/#signup-init">corbado</a> - <a
|
||
href="https://docs.corbado.com/corbado-complete/frontend-integration/angular">Integrate</a>
|
||
Corbado with Angular to use passkeys for authentication.</li>
|
||
<li><a href="https://dev.fingerprint.com/docs/angular">fingerprint</a> -
|
||
The Fingerprint Angular SDK is an easy way to integrate Fingerprint into
|
||
your Angular application.</li>
|
||
<li><a
|
||
href="https://github.com/frontegg/frontegg-angular">frontegg-angular</a>
|
||
- <a href="https://frontegg.com">Frontegg</a> is a web platform where
|
||
SaaS companies can set up their fully managed, scalable, and brand-aware
|
||
SaaS features and integrate them into their SaaS portals in up to 5
|
||
lines of code. Quickly integrate Frontegg’s login box with this <a
|
||
href="https://developers.frontegg.com/sdks/frontend/angular/hosted-login">quickstart
|
||
guide</a>.</li>
|
||
<li><a href="https://fusionauth.io/docs/sdks/angular-sdk">FusionAuth
|
||
Angular SDK</a> - <a href="https://fusionauth.io/">FusionAuth</a> SDK
|
||
helps manage authentication state for your Angular app and provides
|
||
functionality to login, register, and logout users. It also can be
|
||
configured to automatically manage your refresh token.</li>
|
||
<li><a
|
||
href="https://www.npmjs.com/package/hexaeight-sessions">hexaeight-sessions</a>
|
||
- A powerful NPM library designed to simplify session management and
|
||
authentication in web applications. Whether you’re working with React,
|
||
Angular, or Vue, <a
|
||
href="https://docs.hexaeight.com/HexaEight-Sessions/003-HexaEightSessions/">HexaEight
|
||
Sessions</a> provides an intuitive interface for managing user sessions
|
||
efficiently.</li>
|
||
<li><a
|
||
href="https://github.com/mauriciovigolo/keycloak-angular">keycloak-angular</a>
|
||
- Easy Keycloak setup for Angular applications.</li>
|
||
<li><a
|
||
href="https://github.com/luukhaijes/kinde-angular">kinde-angular</a> -
|
||
Angular wrapper around the <a href="https://kinde.com/">Kinde</a>
|
||
Typescript <a
|
||
href="https://docs.kinde.com/developer-tools/sdks/backend/typescript-sdk/">SDK</a>.</li>
|
||
<li><a href="https://github.com/Service-Soft/lbx-jwt">lbx-jwt</a> -
|
||
Provides JWT authentication for loopback applications. Includes storing
|
||
roles inside tokens and handling refreshing. Built-in reuse
|
||
detection.</li>
|
||
<li><a href="https://logto.io/">Logto</a> - An open-source Auth0
|
||
alternative for modern apps and SaaS products, supporting OIDC, OAuth
|
||
2.0 and SAML open standards for authentication and authorization. This
|
||
<a
|
||
href="https://docs.logto.io/quick-starts/angular#prerequisites">quickstart</a>
|
||
can help you use Logto with Angular.</li>
|
||
<li><a href="https://www.npmjs.com/package/@melody-auth/angular"><span
|
||
class="citation"
|
||
data-cites="melody-auth/angular">@melody-auth/angular</span></a> - <a
|
||
href="https://github.com/ValueMelody/melody-auth">Melody Auth</a>
|
||
Angular SDK facilitates seamless interaction between Angular
|
||
applications and the melody auth server. It silently handles
|
||
authentication state management, redirect flows, token exchange, and
|
||
authentication validation for you.</li>
|
||
<li><a href="https://mojoauth.com/">MojoAuth</a> - The Simplest Way to
|
||
<a href="https://docs.mojoauth.com/guides/angular">integrate</a>
|
||
passkeys.</li>
|
||
<li><a
|
||
href="https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-angular">msal-angular</a>
|
||
- MSAL for Angular enables Angular web applications to authenticate
|
||
users using <a
|
||
href="https://docs.microsoft.com/azure/active-directory/develop/v2-overview">Azure
|
||
AD</a> work and school accounts (AAD), Microsoft personal accounts (MSA)
|
||
and social identity providers like Facebook, Google, LinkedIn, Microsoft
|
||
accounts, etc. through <a
|
||
href="https://docs.microsoft.com/azure/active-directory-b2c/active-directory-b2c-overview#identity-providers">Azure
|
||
AD B2C</a> service. It also enables your app to get tokens to access <a
|
||
href="https://www.microsoft.com/enterprise">Microsoft Cloud</a> services
|
||
such as <a href="https://graph.microsoft.io">Microsoft Graph</a>.</li>
|
||
<li><a href="https://www.nblocks.dev/">nblocks</a> - A control center
|
||
for seamless management of Authentication, Payments, Subscriptions,
|
||
Feature, and Role management.</li>
|
||
<li><a href="https://github.com/rustygreen/ng-supabase">ng-supabase</a>
|
||
- An Angular component library for your <a
|
||
href="https://supabase.com/">Supabase</a> project!</li>
|
||
<li><a href="https://github.com/teve-no/ngxfire">ngxfire</a> - Zoneless
|
||
AngularFire replacement.</li>
|
||
<li><a
|
||
href="https://github.com/AlexKhymenko/ngx-permissions">ngx-permissions</a>
|
||
- Permission and roles based access control for your angular
|
||
applications(AOT, lazy modules compatible).</li>
|
||
<li><a
|
||
href="https://github.com/rami-sheikha-dev/ngx-smart-permissions">ngx-smart-permissions</a>
|
||
- A lightweight library for managing role-based and permission-based
|
||
access control in Angular applications. Supports both standalone
|
||
components and NgModules.</li>
|
||
<li><a
|
||
href="https://github.com/JonnyHeavey/ngx-webauthn">ngx-webauthn</a> - An
|
||
Angular library that provides a clean, type-safe abstraction over the
|
||
native WebAuthn API. Features direct support for standard WebAuthn types
|
||
with an optional preset system for common scenarios.</li>
|
||
<li><a href="https://github.com/subha-patra/otp-angular">otp-angular</a>
|
||
- A lightweight, highly customizable, and dependency-free OTP (One-Time
|
||
Password) input component built for Angular 20+ applications.</li>
|
||
<li><a href="https://www.permit.io/">permit</a> - An
|
||
authorization-as-a-service solution that can be used with <a
|
||
href="https://www.permit.io/blog/how-to-implement-role-based-access-control-rbac-in-angular">Angular</a>.</li>
|
||
<li><a href="https://github.com/serhiisol/ngx-auth"><span
|
||
class="citation"
|
||
data-cites="serhiisol/ngx-auth">@serhiisol/ngx-auth</span></a> - Angular
|
||
20+ Authentication Module.</li>
|
||
<li><a
|
||
href="https://supabase.com/docs/guides/getting-started/tutorials/with-angular">supabase</a>
|
||
- Build a User Management App with Angular.</li>
|
||
<li><a href="https://supertokens.com">SuperTokens</a> - Configure your
|
||
<a
|
||
href="https://supertokens.com/docs/quickstart/frontend-setup">Angular</a>
|
||
application to use SuperTokens for authentication.</li>
|
||
<li><a
|
||
href="https://github.com/satya-jugran/witspry-auth-ng-client">witspry-auth-ng-client</a>
|
||
- A comprehensive Angular library for OAuth2 authentication with PKCE
|
||
(Proof Key for Code Exchange) support.</li>
|
||
<li><a
|
||
href="https://zitadel.com/docs/examples/login/angular">zitadel</a> -
|
||
Secure authentication management for your application. Customize as you
|
||
grow, with easy APIs and programmable workflows. Focus on growing, your
|
||
login is in good hands.</li>
|
||
</ul>
|
||
<h4 id="builders">Builders</h4>
|
||
<ul>
|
||
<li><a href="https://webpack.js.org">Webpack</a></li>
|
||
<li><a href="https://esbuild.github.io/">ESBuild</a></li>
|
||
<li><a href="https://github.com/just-jeb/angular-builders">Angular
|
||
Builders</a> - This repo consolidates all the community builders (ES
|
||
Build, Webpack, Jest, Bazel, and Timestamp) for the Angular build
|
||
facade.</li>
|
||
<li><a
|
||
href="https://github.com/just-jeb/angular-builders/tree/master/packages/jest">Jest
|
||
Builder</a> - Jest builder for Angular build facade.</li>
|
||
<li><a
|
||
href="https://github.com/just-jeb/angular-builders/tree/master/packages/custom-webpack">Custom
|
||
Webpack</a></li>
|
||
<li><a
|
||
href="https://github.com/just-jeb/angular-builders/tree/master/packages/custom-esbuild">Custom
|
||
ESBuild</a></li>
|
||
<li><a
|
||
href="https://github.com/just-jeb/angular-builders/tree/master/packages/bazel">Bazel</a>
|
||
- Provides an Angular CLI Builder, which can execute Bazel when
|
||
triggered by ng build, ng test, etc.</li>
|
||
<li><a
|
||
href="https://github.com/just-jeb/angular-builders/tree/master/packages/timestamp">Timestamp</a>
|
||
- This is explained in this <a
|
||
href="https://medium.com/angular-in-depth/angular-cli-under-the-hood-builders-demystified-v2-e73ee0f2d811">article</a>.</li>
|
||
<li><a
|
||
href="https://github.com/manfredsteyer/ngx-build-plus">ngx-build-plus</a>
|
||
- Extend the Angular CLI’s default build behavior without ejecting, e.
|
||
g. for Angular Elements.</li>
|
||
<li><a
|
||
href="https://github.com/bampakoa/ngx-electronify">ngx-electronify</a> -
|
||
Angular CLI builder that runs your application in the desktop using
|
||
Electron.</li>
|
||
<li><a href="https://github.com/chihab/dotenv-run">dotenv-run</a> -
|
||
Seamlessly load environment variables. Supports cli, esbuild, rollup,
|
||
vite, webpack, angular, ESM and Monorepos.</li>
|
||
<li><a href="https://github.com/ng-packagr/ng-packagr">ng-packagr</a> -
|
||
Compile and package Angular libraries in Angular Package Format
|
||
(APF).</li>
|
||
<li><a
|
||
href="https://github.com/igorissen/angular-env-builder">angular-env-builder</a>
|
||
- Builder to generate <code>src/environments/environment.ts</code> file
|
||
based on your environment variables.</li>
|
||
<li><a href="https://github.com/nrwl/angular-rspack">angular-rspack</a>
|
||
- <a href="https://github.com/web-infra-dev/rspack">Rspack</a> plugin
|
||
and tooling for Angular applications.</li>
|
||
<li><a
|
||
href="https://github.com/Celtian/ngx-devkit-builders">ngx-devkit-builders</a>
|
||
- This package contains Architect builders used to build and test
|
||
Angular applications and libraries.</li>
|
||
<li><a
|
||
href="https://github.com/sitelint/angular-static-assets-hash">angular-static-assets-hash</a>
|
||
- Create a list of Angular static assets and a hash for each file.</li>
|
||
<li><a
|
||
href="https://github.com/kstepien3/ngx-schematic-builder">ngx-schematic-builder</a>
|
||
- A tool for building Angular schematic projects. Compiles and packages
|
||
your custom schematics, preparing them for publishing and use.</li>
|
||
</ul>
|
||
<h4 id="cli">CLI</h4>
|
||
<ul>
|
||
<li><a href="https://angular.dev/tools/cli">Official web page</a></li>
|
||
<li><a href="https://github.com/angular/angular-cli">Official GitHub
|
||
repository</a></li>
|
||
<li><a
|
||
href="https://github.com/cexbrayat/angular-cli-diff">angular-cli-diff</a>
|
||
- Easily upgrade your Angular CLI applications from one version to
|
||
another 🚀.</li>
|
||
<li><a
|
||
href="https://github.com/cexbrayat/angular-cli-ssr-diff">angular-cli-ssr-diff</a>
|
||
- Easily upgrade your Angular CLI SSR applications from one version to
|
||
another 🚀.</li>
|
||
<li><a
|
||
href="https://www.npmjs.com/package/angular-codx-recipe">angular-codx-recipe</a>
|
||
- A <a href="https://github.com/marmotz-dev/codx">Codx</a> recipe for
|
||
setting up Angular projects quickly and efficiently.</li>
|
||
<li><a
|
||
href="https://github.com/mahdi-hajian/angular-parallel-test-runner">angular-parallel-test-runner</a>
|
||
- A command-line tool designed to run Angular tests in parallel across
|
||
multiple projects. It utilizes the concurrency capabilities of your
|
||
machine, maximizing the efficiency of running tests by leveraging
|
||
multiple CPU cores.</li>
|
||
<li><a
|
||
href="https://github.com/dot-build/angular-serve-and-run">angular-serve-and-run</a>
|
||
- Serve your Angular CLI project then run a command on top of it.</li>
|
||
<li><a href="https://github.com/elecash/dotairc">dotairc</a> - This tool
|
||
helps create consistent instructions for AI assistants working with your
|
||
codebase.</li>
|
||
<li><a
|
||
href="https://github.com/FirebaseExtended/firebase-framework-tools">firebase-framework-tools</a>
|
||
- Experimental addon to the <a
|
||
href="https://github.com/firebase/firebase-tools/">Firebase CLI</a> to
|
||
add web framework support.</li>
|
||
<li><a href="https://github.com/KilloconQ/kqgen">kqgen</a> - A fast and
|
||
flexible CLI for generating Angular components and services. Includes
|
||
presets for tables, filters, and for REST/GraphQL services.</li>
|
||
<li><a href="https://github.com/yuo-app/lin">lin</a> - Lazy I18N is a
|
||
CLI tool that translates locale JSONs using LLMs.</li>
|
||
<li><a href="https://github.com/mantis-apps/mantis-cli">mantis-cli</a> -
|
||
M.A.N.T.I.S (MongoDB, Angular with Analog, Nx, Tailwind CSS, Ionic,
|
||
Storybook) is not just a CLI tool; it’s your passport to a seamless
|
||
full-stack project launch.</li>
|
||
<li><a
|
||
href="https://github.com/talzach/mcp-angular-cli">mcp-angular-cli</a> -
|
||
A Model Context Protocol server that provides Angular CLI and workspace
|
||
automation capabilities. This server enables LLMs and agents to interact
|
||
with Angular projects, generate components/services, add packages,
|
||
create new workspaces, and run custom architect targets via the Angular
|
||
CLI.</li>
|
||
<li><a
|
||
href="https://github.com/lcasass3/nest-schematics">nest-schematics</a> -
|
||
A powerful Angular CLI schematic for generating CQRS (Command Query
|
||
Responsibility Segregation) modules following hexagonal architecture
|
||
principles in NestJS applications.</li>
|
||
<li><a
|
||
href="https://github.com/larscom/ng-chrome-extension">ng-chrome-extension</a>
|
||
- Easily create Angular Chrome Extensions (manifest v3).</li>
|
||
<li><a href="https://github.com/th3n00bc0d3r/ns-gc">ns-gc</a> - A
|
||
lightweight command-line tool to generate standalone NativeScript
|
||
Angular components and Angular services with clean structure and zero
|
||
config.</li>
|
||
<li><a href="https://github.com/maran-t/ngx-create">ngx-create</a> - A
|
||
lightweight CLI for quickly generating Angular projects with optional
|
||
frameworks like Material, Tailwind, Bootstrap, and NgRx.</li>
|
||
<li><a href="https://github.com/ngx-devs/ngx-devs-cli">ngx-devs-cli</a>
|
||
- Command-line interface (CLI) built in Node.js allow you to automate
|
||
repetitive tasks and make your life easier when working with Angular
|
||
projects.</li>
|
||
<li><a
|
||
href="https://github.com/pratiksonone/ngx-i18n-scan">ngx-i18n-scan</a> -
|
||
A powerful CLI tool for scanning Angular source code and managing i18n
|
||
translation keys. It automatically extracts keys from your project and
|
||
keeps your translation files (like en.json) clean and updated.</li>
|
||
<li><a href="https://github.com/bluehalo/ngx-starter">ngx-starter</a> -
|
||
An <a href="https://github.com/angular/angular-cli"><span
|
||
class="citation" data-cites="angular/cli">@angular/cli</span></a> based
|
||
starter containing common components and services as well as a reference
|
||
site.</li>
|
||
<li><a href="https://github.com/tomer953/ngx-stats">ngx-stats</a> - A
|
||
CLI tool for Angular project analysis that quantifies modules,
|
||
components, directives, pipes, and services, offering a clear structural
|
||
overview to help developers better understand architectural choices and
|
||
app organization.</li>
|
||
<li><a
|
||
href="https://github.com/BernardoGiordano/ngx-stylesweep">ngx-stylesweep</a>
|
||
- A CLI tool that removes empty style files from your Angular
|
||
components.</li>
|
||
<li><a href="https://github.com/art-ws/ngx-ws">ngx-ws</a> - Easily split
|
||
a large <code>angular.json</code> into modular, project-local files
|
||
using the power of <a
|
||
href="https://www.npmjs.com/package/@apidevtools/json-schema-ref-parser">JSON
|
||
References</a>, with the convenience of <a
|
||
href="https://yaml.org/">YAML</a> and <a
|
||
href="https://json5.org/">JSON5</a> formats.</li>
|
||
<li><a href="https://github.com/rafa00716/rafacli">rafacli</a> - A
|
||
command-line tool designed to generate authentication and CRUD modules
|
||
(and more soon) for NestJS and Angular applications. It streamlines the
|
||
development process by automating boilerplate code creation, reducing
|
||
repetitive tasks, and ensuring consistency across projects.</li>
|
||
</ul>
|
||
<h4 id="deployment">Deployment</h4>
|
||
<ul>
|
||
<li><a href="https://docs.amplify.aws/angular/">aws amplify</a></li>
|
||
<li><a href="https://vercel.com/solutions/angular">Vercel</a></li>
|
||
<li><a
|
||
href="https://firebase.google.com/docs/app-hosting/get-started">Firebase
|
||
Hosting</a></li>
|
||
<li><a href="https://docs.netlify.com/frameworks/angular/">Netlify</a> -
|
||
Angular applications on Netlify can benefit from integrations such as
|
||
automatic framework detection and built-in redirects functionality. The
|
||
<a href="https://github.com/netlify/angular-runtime">Angular Runtime</a>
|
||
plugin implements Angular Support on Netlify.</li>
|
||
<li><a
|
||
href="https://github.com/angular-schule/angular-cli-ghpages">angular-cli-ghpages</a>
|
||
- SSR does not work, and there can be some caveats, but you can host
|
||
your Angular project on GitHub Pages.</li>
|
||
<li><a
|
||
href="https://github.com/k9n-dev/analog-publish-gh-pages">analog-publish-gh-pages</a>
|
||
- A Github Action for the Deployment of an <a
|
||
href="https://analogjs.org">Analog.js</a> App on Github Pages.</li>
|
||
<li><a href="https://github.com/Genez-io/genezio">Genezio</a> - The
|
||
easiest way to write and host a serverless application.</li>
|
||
<li><a
|
||
href="https://developers.cloudflare.com/pages/framework-guides/deploy-an-angular-site/#create-a-new-project-using-the-create-cloudflare-cli-c3">Cloudflare
|
||
Pages</a></li>
|
||
<li><a href="https://zerops.io/">Zerops</a> - Zerops makes deploying and
|
||
running Analog apps, both <a
|
||
href="https://github.com/zeropsio/recipe-analog-nodejs">server side
|
||
rendered</a> and <a
|
||
href="https://github.com/zeropsio/recipe-analog-static">static</a>, a
|
||
breeze.</li>
|
||
<li><a
|
||
href="https://github.com/OrthoFi/actions-angular-deploy">actions-angular-deploy</a></li>
|
||
<li><a
|
||
href="https://github.com/OrthoFi/actions-angular-ci-cd">actions-angular-ci-cd</a></li>
|
||
</ul>
|
||
<h4 id="desktop">Desktop</h4>
|
||
<ul>
|
||
<li><a href="https://github.com/electron/electron">electron</a> - Build
|
||
cross-platform desktop apps with JavaScript, HTML, and CSS.</li>
|
||
<li><a
|
||
href="https://github.com/maximegris/angular-electron">angular-electron</a>
|
||
- Ultra-fast bootstrapping with Angular and Electron.</li>
|
||
<li><a
|
||
href="https://github.com/neutralinojs/neutralinojs">neutralinojs</a> - A
|
||
lightweight and portable desktop application development framework. It
|
||
lets you develop lightweight cross-platform desktop applications using
|
||
JavaScript, HTML and CSS. Apps built with Neutralinojs can run on Linux,
|
||
macOS, Windows, Web, and Chrome.</li>
|
||
<li><a href="https://github.com/nwjs/nw.js">nw.js</a> - An app runtime
|
||
based on Chromium and Node.js. You can write native apps in HTML and
|
||
JavaScript with NW.js. It also lets you call Node.js modules directly
|
||
from the DOM and enables a new way of writing native applications with
|
||
all web technologies.</li>
|
||
<li><a
|
||
href="https://github.com/nwutils/nw-angular-example">nw-angular-example</a>
|
||
- An example of integrating Angular with NW.js.</li>
|
||
<li><a href="https://v2.tauri.app/">tauri</a> - Create small, fast,
|
||
secure, cross-platform applications.</li>
|
||
<li><a
|
||
href="https://github.com/maximegris/angular-tauri">angular-tauri</a> -
|
||
Ultra-fast bootstrapping with Angular and Tauri.</li>
|
||
<li><a
|
||
href="https://github.com/tauri-apps/create-tauri-app">create-tauri-app</a>
|
||
- Rapidly scaffold out a new Tauri app project.</li>
|
||
<li><a href="https://github.com/wailsapp/wails">wails</a> - Build
|
||
desktop applications using Go & web technologies, including <a
|
||
href="https://wails.io/docs/guides/angular/">Angular</a>.</li>
|
||
</ul>
|
||
<h4 id="developer-tools">Developer tools</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/princemaple/ngx-html-syntax">ngx-html-syntax</a>
|
||
- Angular HTML Syntax for <a
|
||
href="https://www.sublimetext.com/">SublimeText</a>.</li>
|
||
<li><a
|
||
href="https://bugfender.com/platforms/angular-logging/">Bugfender</a> -
|
||
A cloud service to collect logs and Angular errors in Real-Time.</li>
|
||
<li><a href="https://angular.dev/tools/devtools">Angular Dev Tools</a> -
|
||
Angular DevTools is a browser extension that provides debugging and
|
||
profiling capabilities for Angular applications.</li>
|
||
<li><a href="https://github.com/angular/vscode-ng-language-service">VS
|
||
Code NG Language Service</a> - This extension provides a rich editing
|
||
experience for Angular templates.</li>
|
||
<li><a href="https://github.com/reduxjs/redux-devtools/">Redux
|
||
DevTools</a> - Can be used in combination with <span class="citation"
|
||
data-cites="ngrx/store-devtools">@ngrx/store-devtools</span> to inspect
|
||
the state of your NgRx app.<br />
|
||
</li>
|
||
<li><a
|
||
href="https://ionicframework.com/docs/intro/vscode-extension">Ionic VS
|
||
Code Extension</a> - Perform various functions that are common to
|
||
developing an Ionic app, all without leaving your VS Code window.</li>
|
||
<li><a
|
||
href="https://marketplace.visualstudio.com/items?itemName=cyrilletuzi.angular-schematics">Angular
|
||
Schematics</a> - Ultimate code generation in Visual Studio Code.</li>
|
||
<li><a
|
||
href="https://marketplace.visualstudio.com/items?itemName=Mikael.Angular-BeastCode">Angular
|
||
17 Snippets</a> - 258 Angular Snippets (TypeScript, Html, Angular
|
||
Material, Flex Layout, NgRx, RxJS, PWA & Testing).</li>
|
||
<li><a href="https://github.com/johnpapa/vscode-angular-snippets">VS
|
||
Code Angular Snippets</a> - This extension for Visual Studio Code adds
|
||
snippets for Angular for TypeScript and HTML.</li>
|
||
<li><a
|
||
href="https://marketplace.visualstudio.com/items?itemName=loiane.angular-extension-pack">Angular
|
||
Extension Pack</a> - This extension pack packages some of the most
|
||
popular VS Code Angular extensions.</li>
|
||
<li><a
|
||
href="https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console">Nx
|
||
Console</a> - Spend less time looking up command line arguments and more
|
||
time shipping incredible products.</li>
|
||
<li><a
|
||
href="https://marketplace.visualstudio.com/items?itemName=ghaschel.vscode-angular-html">VS
|
||
Code Angular HTML</a> - Syntax highlighting for angular HTML Template
|
||
files.</li>
|
||
<li><a
|
||
href="https://github.com/EPAM-JS-Competency-center/angular-scaffold">angular-scaffold</a>
|
||
- Scaffold an Angular project with all tooling you need for production
|
||
projects.</li>
|
||
<li><a
|
||
href="https://github.com/CoderAllan/vscode-angulartools">vscode-angulartools</a>
|
||
- You can explore an Angular project, enhance documentation, reverse
|
||
engineer code, and do refactoring with <a
|
||
href="https://marketplace.visualstudio.com/items?itemName=coderAllan.vscode-angulartools">AngularTools</a>.</li>
|
||
<li><a
|
||
href="https://github.com/DSI-HUG/ngx-schematics-utilities">ngx-schematics-utilities</a>
|
||
- Useful utilities for Angular Schematics.</li>
|
||
<li><a
|
||
href="https://github.com/angular-architects/detective">detective</a> -
|
||
Detective leverages forensic code analysis at the architectural level to
|
||
uncover hidden patterns in your codebase.</li>
|
||
<li><a href="https://esbuild.github.io/analyze/">esbuild Bundle Size
|
||
Analyzer</a> - Visualize the contents of your esbuild bundle.</li>
|
||
<li><a href="https://github.com/angular-experts-io/hawkeye">hawkeye</a>
|
||
- A powerful tool designed to help developers visualize and optimize
|
||
their JavaScript bundles. With our intuitive interface, you can gain
|
||
deep insights into your project’s bundle structure, identifying large
|
||
modules, dependencies, and assets that may be impacting
|
||
performance.</li>
|
||
<li><a
|
||
href="https://github.com/Mohid123/ngx-script-optimizer">ngx-script-optimizer</a>
|
||
- A lightweight Angular library designed to supercharge your third-party
|
||
script handling.</li>
|
||
<li><a
|
||
href="https://github.com/alfredoperez/ngx-dev-toolbar">ngx-dev-toolbar</a>
|
||
- A powerful development toolbar for Angular applications to improve
|
||
your developer productivity directly in the browser.</li>
|
||
<li><a href="https://github.com/Khumozin/ngx-rename">ngx-rename</a> -
|
||
This repository contains PowerShell and Bash scripts to rename an
|
||
Angular project folder and update relevant files, such as angular.json,
|
||
package.json, tsconfig.json, and other configuration files.</li>
|
||
<li><a href="https://github.com/mnfst/manifest">manifest</a> - A
|
||
lightweight Backend-as-a-Service (BaaS) that fits into a single YAML
|
||
file. This <a href="https://manifest.build/docs/angular">quick start</a>
|
||
shows how to use it with Angular.</li>
|
||
<li><a
|
||
href="https://github.com/nathansbradshaw/zed-angular">zed-angular</a> -
|
||
This extension integrates the Angular Language Service into <a
|
||
href="https://zed.dev/">Zed</a>.</li>
|
||
<li><a
|
||
href="https://marketplace.visualstudio.com/items/?itemName=AdrienAudouard.i18n-studio">i18n-studio</a>
|
||
- Powerful Angular internationalization (i18n) extension for VS Code
|
||
that displays translations inline, provides autocompletion for i18n keys
|
||
in TypeScript and HTML files, and offers quick access to translation
|
||
files. Streamline your multilingual development workflow.</li>
|
||
<li><a href="https://github.com/wgrabowski/ngx-unused">ngx-unused</a> -
|
||
Find declared but unused Angular classes in your codebase.</li>
|
||
<li><a
|
||
href="https://github.com/simonh1000/angular-http-server">angular-http-server</a>
|
||
- Simple http-server for Single Page Apps (SPAs).</li>
|
||
<li><a
|
||
href="https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-angular-generator">angular
|
||
file generator</a> - Supercharge your Angular development with intuitive
|
||
and rapid file generation. Create components, services, modules, and
|
||
more with just a few clicks - compatible with Angular 16-20.</li>
|
||
<li><a href="https://github.com/filipsobol/sonda">sonda</a> - Universal
|
||
visualizer and analyzer for JavaScript and CSS.</li>
|
||
<li><a href="https://cyrilletuzi.gumroad.com/l/schematicspro">angular
|
||
schematics pro</a> - Ultimate Angular code generation in Visual Studio
|
||
Code.</li>
|
||
<li><a
|
||
href="https://github.com/ngx-rock/vscode-angular-auto-import">vscode-angular-auto-import</a>
|
||
- Automatically suggests and inserts missing Angular component imports
|
||
based on selectors used in templates.</li>
|
||
<li><a href="https://github.com/ngneat/falso">falso</a> - All the Fake
|
||
Data for All Your Real Needs.</li>
|
||
</ul>
|
||
<h4 id="documentation-tools">Documentation tools</h4>
|
||
<ul>
|
||
<li><a href="https://github.com/storybooks/storybook">Storybook</a>- The
|
||
UI development environment you’ll love to use.</li>
|
||
<li><a href="https://github.com/compodoc/compodoc">Compodoc</a> - The
|
||
missing documentation tool for your Angular application.</li>
|
||
<li><a href="https://github.com/ng-doc/ng-doc">ng-doc</a> - The
|
||
documentation engine for Angular projects.</li>
|
||
<li><a href="https://github.com/docgeni/docgeni">docgeni</a> - A modern,
|
||
powerful and out of the box documentation generator for Angular
|
||
components lib and markdown docs.</li>
|
||
<li><a href="https://github.com/trakkjs/trakk-js">trakk.js</a> -
|
||
Automatic Documentation Generation / Real-Time Code Execution Flow /
|
||
Testing / Debugging / Onboarding for Front-End Applications.</li>
|
||
<li><a
|
||
href="https://github.com/timonkrebs/ng-component-hierarchy-visualizer">ng-component-hierarchy-visualizer</a>
|
||
- A non invasive tool to generate Mermaid representations of your
|
||
Angular component hierarchy representation based on the route
|
||
configurations.</li>
|
||
<li><a
|
||
href="https://github.com/alonrbar/easy-template-x-angular-expressions">easy-template-x-angular-expressions</a>
|
||
- Angular expressions support for <a
|
||
href="https://github.com/alonrbar/easy-template-x">easy-template-x</a>.</li>
|
||
<li><a
|
||
href="https://github.com/JMGomes/angular-latest-snippets">angular-latest-snippets</a>
|
||
- Comprehensive Angular v19 <a
|
||
href="https://marketplace.visualstudio.com/items?itemName=JMGomes.angular-latest-snippets">snippets</a>
|
||
for TypeScript and HTML, including support for the latest Angular
|
||
features. This extension was created to bridge the gap in resources for
|
||
Angular’s newest capabilities, most existing code snippets are quite
|
||
outdated.</li>
|
||
</ul>
|
||
<h4 id="feature-flags">Feature Flags</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://openfeature.dev/docs/reference/technologies/client/web/angular">OpenFeature
|
||
Angular SDK</a> - <a href="https://openfeature.dev/">OpenFeature</a> is
|
||
an open specification that provides a vendor-agnostic, community-driven
|
||
API for feature flagging that works with your favorite feature flag
|
||
management tool or in-house solution.</li>
|
||
<li><a
|
||
href="https://www.npmjs.com/package/@devcycle/openfeature-angular-provider"><span
|
||
class="citation"
|
||
data-cites="devcycle/openfeature-angular-provider">@devcycle/openfeature-angular-provider</span></a>
|
||
- <a
|
||
href="https://docs.devcycle.com/sdk/client-side-sdks/angular/">DevCycle</a>
|
||
supports the OpenFeature Angular SDK.</li>
|
||
<li><a
|
||
href="https://www.npmjs.com/package/@openfeature/go-feature-flag-web-provider"><span
|
||
class="citation"
|
||
data-cites="openfeature/go-feature-flag-web-provider">@openfeature/go-feature-flag-web-provider</span></a>
|
||
- <a href="https://gofeatureflag.org/">GO Feature Flag</a> provider
|
||
allows you to <a
|
||
href="https://gofeatureflag.org/docs/sdk/client_providers/openfeature_angular">connect</a>
|
||
to your GO Feature Flag instance with the
|
||
<code>@openfeature/web-sdk</code>.</li>
|
||
<li><a
|
||
href="https://github.com/carlcrede/ngx-growthbook-workspace/tree/master/projects/ngx-growthbook">ngx-growthbook</a>
|
||
- An Angular wrapper for <a
|
||
href="https://www.growthbook.io/">GrowthBook</a>, providing feature
|
||
flags and A/B testing capabilities with full TypeScript support.</li>
|
||
<li><a href="https://www.flagsmith.com/">Flagsmith</a> - Ship Faster and
|
||
Control Releases with Feature Flag Management.</li>
|
||
<li><a
|
||
href="https://github.com/Karelics/angular-unleash-proxy-client">angular-unleash-proxy-client</a>
|
||
- Angular wrapper for <a href="https://www.getunleash.io/">unleash</a>
|
||
and <a
|
||
href="https://github.com/Unleash/unleash-proxy-client-js">unleash-proxy-client-js</a>.</li>
|
||
<li><a
|
||
href="https://github.com/zenkiet/ngx-version-view">ngx-version-view</a>
|
||
- A powerful Angular library that enables version-aware component
|
||
rendering for seamless feature toggling based on application
|
||
versions.</li>
|
||
<li><a
|
||
href="https://www.npmjs.com/package/@statsig/angular-bindings"><span
|
||
class="citation"
|
||
data-cites="statsig/angular-bindings">@statsig/angular-bindings</span></a>
|
||
- The <a href="https://www.statsig.com/">Statsig</a> Angular bindings
|
||
package provides a <code>StatsigService</code> that can be injected into
|
||
your components. See the <a
|
||
href="https://docs.statsig.com/client/javascript-sdk/Angular/">Statsig
|
||
docs</a> for more details.</li>
|
||
<li><a href="https://github.com/configcat/js-sdk"><span class="citation"
|
||
data-cites="configcat/js-sdk">@configcat/js-sdk</span></a> - ConfigCat
|
||
SDK for JavaScript provides easy integration for your application to <a
|
||
href="https://configcat.com/">ConfigCat</a>.</li>
|
||
<li><a
|
||
href="https://github.com/configcat-labs/feature-flags-in-angular-sample-app"><span
|
||
class="citation"
|
||
data-cites="configcat-labs/feature-flags-in-angular-sample-app">@configcat-labs/feature-flags-in-angular-sample-app</span></a>
|
||
- Example app that uses ConfigCat.</li>
|
||
<li><a
|
||
href="https://github.com/featurit/featurit-sdk-angular">featurit-sdk-angular</a>
|
||
- Angular wrapper of the Javascript client for the <a
|
||
href="https://featurit.com/">FeaturIT</a> Feature Flag management
|
||
platform.</li>
|
||
<li><a href="https://www.npmjs.com/package/@flagpole/angular"><span
|
||
class="citation"
|
||
data-cites="flagpole/angular">@flagpole/angular</span></a> - Angular SDK
|
||
for the <a href="https://useflagpole.dev/">Flagpole</a> feature flag
|
||
management system. Provides real-time feature flag updates, A/B testing
|
||
capabilities, and seamless integration with Angular applications.</li>
|
||
</ul>
|
||
<h4 id="generators">Generators</h4>
|
||
<h5 id="go">Go</h5>
|
||
<ul>
|
||
<li><a href="https://github.com/Shpota/goxygen">goxygen</a> - Goxygen
|
||
generates back-end Go code, connects it with front-end components,
|
||
provides a Dockerfile for the application, and creates docker-compose
|
||
files that run in development and production environments.</li>
|
||
</ul>
|
||
<h5 id="net">NET</h5>
|
||
<ul>
|
||
<li><a href="https://github.com/abpframework/abp">abp</a> - Open-source
|
||
web application framework for ASP.NET Core! Offers an opinionated
|
||
architecture to build enterprise software solutions with best practices
|
||
on top of the .NET.</li>
|
||
<li><a href="https://www.lymestack.com/">LymeStack</a> - LymeStack is a
|
||
full-stack, full-featured web application template & toolset
|
||
designed to provide small businesses and organizations with an
|
||
accelerated starting point when it comes to creating new apps and adding
|
||
features to those apps.</li>
|
||
<li><a href="https://github.com/filiptrivan/spiderly">spiderly</a> -
|
||
.NET (C#) code generator that transforms an EF Core model into a fully
|
||
customizable .NET (C#) + Angular web app.</li>
|
||
</ul>
|
||
<h5 id="node">Node</h5>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/tauri-apps/create-tauri-app">create-tauri-app</a>
|
||
- Rapidly scaffold out a new Tauri app project.</li>
|
||
<li><a
|
||
href="https://github.com/jhipster/generator-jhipster-ionic">generator-jhipster-ionic</a>
|
||
- You can use it to generate an Ionic app that talks to a JHipster
|
||
backend.</li>
|
||
<li><a href="https://start.nodeinit.dev/">Node Initializr</a> - Node
|
||
Initializr offers a fast way to pull in all the dependencies you need
|
||
for your application and does a lot of the setup for you.</li>
|
||
<li><a href="https://nx.dev/nx-api/angular">nx</a> - The Nx Plugin for
|
||
Angular contains executors, generators, and utilities for managing
|
||
Angular applications and libraries within an Nx workspace. It also
|
||
enables using Angular Devkit builders and schematics in Nx
|
||
workspaces.</li>
|
||
<li><a href="https://skulljs.github.io/">skulljs</a> - Skulljs aims to
|
||
give a standardized file structure to create web applications based on
|
||
popular Javascript / Typescript frameworks.</li>
|
||
<li><a
|
||
href="https://github.com/teleporthq/teleport-code-generators">teleport-code-generators</a>
|
||
- A collection of code generators for modern JavaScript
|
||
applications.</li>
|
||
</ul>
|
||
<h5 id="spring-boot">Spring Boot</h5>
|
||
<ul>
|
||
<li><a href="https://bootify.io">Bootify.io</a> - Generate Spring Boot
|
||
apps with custom database, Angular frontend and CRUD functionality.</li>
|
||
<li><a href="https://github.com/nathangtg/jangular-cli">jangular-cli</a>
|
||
- Comprehensive Full-Stack Starter Kit: Powered by Spring Boot and
|
||
Angular, featuring JWT-based authentication, seamless Flyway migrations,
|
||
robust route protection, and a command-line interface for quick project
|
||
initialization.</li>
|
||
<li><a href="https://www.jhipster.tech">JHipster</a> - Open source app
|
||
generator for Spring Boot and Angular.</li>
|
||
</ul>
|
||
<h4 id="graphql">GraphQL</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/kamilkisiela/apollo-angular">apollo-angular</a>
|
||
- A fully-featured, production ready caching GraphQL client for Angular
|
||
and every GraphQL server.</li>
|
||
<li><a href="https://github.com/wassim-k/apollo-orbit">apollo-orbit</a>
|
||
- A fully-featured GraphQL client for Angular with modular state
|
||
management.</li>
|
||
<li><a href="https://github.com/buoy-graphql/buoy">buoy</a> - A GraphQL
|
||
client for Angular built on top of Apollo.</li>
|
||
<li><a
|
||
href="https://github.com/dotansimha/graphql-code-generator">graphql-code-generator</a>
|
||
- A tool for generating code based on a GraphQL schema and GraphQL
|
||
operations (query/mutation/subscription), with flexible support for
|
||
custom plugins.</li>
|
||
<li><a href="https://github.com/hasura/learn-graphql">hasura</a> - Real
|
||
world GraphQL tutorials for frontend developers with deadlines!</li>
|
||
<li><a
|
||
href="https://tailcall.run/blog/graphql-angular-client/">tailcall</a> -
|
||
This comprehensive guide dives into five powerful approaches for
|
||
integrating GraphQL into your Angular applications.</li>
|
||
<li><a href="https://www.takeshape.io/">takeshape</a> - It’s easy to
|
||
build a GraphQL API using TakeShape. Integrating with an Angular project
|
||
is easy, and you can follow this <a
|
||
href="https://app.takeshape.io/docs/get-started/client/angular">guide</a>.</li>
|
||
</ul>
|
||
<h4 id="http">HTTP</h4>
|
||
<ul>
|
||
<li><a href="https://github.com/auth0/angular2-jwt">angular2-jwt</a> -
|
||
Library for sending authenticated HTTP requests and decoding JWTs.</li>
|
||
<li><a
|
||
href="https://github.com/nigrosimone/ng-http-caching">ng-http-caching</a>
|
||
- Cache for HTTP requests in Angular application.</li>
|
||
<li><a href="https://github.com/ngneat/cashew">cashew</a> - A flexible
|
||
and straightforward library that caches HTTP requests in Angular.</li>
|
||
<li><a href="https://github.com/jscutlery/convoyr">convoyr</a> - Modular
|
||
HTTP extensions for Angular.</li>
|
||
<li><a
|
||
href="https://github.com/patrikx3/angular-http-cache-interceptor">angular-http-cache-interceptor</a>
|
||
- Angular HTTP cache interceptor.</li>
|
||
<li><a
|
||
href="https://github.com/ngify/ngify/tree/main/packages/http"><span
|
||
class="citation" data-cites="ngify/http">@ngify/http</span></a> - A
|
||
reactive HTTP client in the form of <code>@angular/common/http</code>,
|
||
offers the following major features: typed response objects, streamlined
|
||
error handling, request and response interception.</li>
|
||
<li><a
|
||
href="https://github.com/mpalourdio/ng-http-loader">ng-http-loader</a> -
|
||
Smart Angular HTTP interceptor - Intercepts automagically HTTP requests
|
||
and shows a spinkit spinner / loader / progress bar.</li>
|
||
<li><a
|
||
href="https://github.com/diegomvh/angular-odata">angular-odata</a> - A
|
||
fluent API for querying, creating, updating and deleting OData resources
|
||
in Angular.</li>
|
||
<li><a
|
||
href="https://github.com/itpixelz/ngx-http-retry">ngx-http-retry</a> -
|
||
An Angular service that provides HTTP methods (GET, POST, PUT, DELETE)
|
||
with built-in retry logic using RxJS’s <code>retry</code> operator.</li>
|
||
<li><a
|
||
href="https://github.com/terzurumluoglu/ng-memento">ng-memento</a> -
|
||
Makes your application faster by preventing the same HTTP requests from
|
||
being called again in your Angular project.</li>
|
||
<li><a
|
||
href="https://github.com/Celtian/ngx-suspense-of">ngx-suspense-of</a> -
|
||
Angular directive that adds suspense to your app.</li>
|
||
<li><a
|
||
href="https://github.com/daiscog/ngx-http-request-state">ngx-http-request-state</a>
|
||
- An Angular library for wrapping HttpClient responses with loading
|
||
& error information.</li>
|
||
<li><a
|
||
href="https://github.com/andrei-shpileuski/ngs-request-tracker">ngs-request-tracker</a>
|
||
- A library for tracking, storing, and displaying statistics on all HTTP
|
||
requests.</li>
|
||
<li><a href="https://github.com/Service-Soft/ngx-pwa">ngx-pwa</a> -
|
||
Provides additional functionality around Angular pwa’s. Most notably
|
||
being able to cache and sync POST/PATCH/DELETE Requests.</li>
|
||
<li><a
|
||
href="https://github.com/paddls/ngx-repository">ngx-repository</a> -
|
||
Easily create a strongly typed data client (HTTP REST or Firestore) in
|
||
your Angular project.</li>
|
||
<li><a
|
||
href="https://github.com/gizm0bill/gzm/tree/master/libs/ng-rest-client">ng-rest-client</a>
|
||
- This library provides a set of decorators for simplifying HTTP
|
||
requests. It enables developers to define RESTful API clients using
|
||
decorators for common HTTP methods.</li>
|
||
<li><a
|
||
href="https://github.com/InnovA2/ngx-http-helper">ngx-http-helper</a> -
|
||
A lightweight library to easily call your APIs and add JWT token or API
|
||
key on each header request.</li>
|
||
<li><a
|
||
href="https://github.com/marcospds/ngx-sse-client">ngx-sse-client</a> -
|
||
A simple <strong>SSE</strong> (Server Sent Events) client for Angular
|
||
applications to replace the use of <code>EventSource</code>.</li>
|
||
<li><a
|
||
href="https://github.com/connectrpc/connect-es/tree/main/packages/connect-web"><span
|
||
class="citation"
|
||
data-cites="connectrpc/connect-web">@connectrpc/connect-web</span></a> -
|
||
<a href="https://connectrpc.com/">Connect</a> is a family of libraries
|
||
for building and consuming APIs on different languages and platforms. <a
|
||
href="https://www.npmjs.com/package/@connectrpc/connect"><span
|
||
class="citation"
|
||
data-cites="connectrpc/connect">@connectrpc/connect</span></a> brings
|
||
type-safe APIs with Protobuf to TypeScript.
|
||
<code>@connectrpc/connect-web</code> provides adapters for web browsers.
|
||
See this <a
|
||
href="https://github.com/connectrpc/examples-es/tree/main/angular">example</a>
|
||
to integrate Connect with Angular.</li>
|
||
<li><a
|
||
href="https://github.com/NGneers/ng-httpclient-easy-network-stub">ng-httpclient-easy-network-stub</a>
|
||
- An easy class to mock a lot of network requests from the Angular
|
||
HttpClient.</li>
|
||
<li><a href="https://github.com/fvilli/simply-direct">simply-direct</a>
|
||
- A fullstack communication library that bridges Angular and NestJS
|
||
through real-time, bidirectional communication powered by
|
||
WebSockets.</li>
|
||
<li><a
|
||
href="https://github.com/ressurectit/ng-error-handling">ng-error-handling</a>
|
||
- An Angular module designed for managing HTTP API error responses.</li>
|
||
<li><a
|
||
href="https://github.com/HiptJo/active-connect">active-connect</a> - A
|
||
powerful connection framework designed for smart web-based projects
|
||
using Node.js, Angular, and WebSockets. It provides decorators and
|
||
utilities to simplify the integration of Angular with a WebSocket
|
||
server, making it easier to handle real-time communication between
|
||
clients and the server.</li>
|
||
<li><a
|
||
href="https://github.com/wnabil/ngx-drupal8-rest">ngx-drupal8-rest</a> -
|
||
Drupal 8 rest module for Angular applications.</li>
|
||
<li><a
|
||
href="https://github.com/JPtenBerge/ngx-signal-pagination">ngx-signal-pagination</a>
|
||
- Pagination for Angular, powered by signals.</li>
|
||
<li><a href="https://github.com/OGS-GmbH/ngx-http">ngx-http</a> - A
|
||
lightweight Angular library that enhances HTTP functionalities by
|
||
providing types, static values, and utility functions.</li>
|
||
<li><a href="https://github.com/angular-experts-io/resource"><span
|
||
class="citation"
|
||
data-cites="angular-experts-io/resource">@angular-experts-io/resource</span></a>
|
||
- The missing create, update, delete (CUD) support for Angular
|
||
resource.</li>
|
||
<li><a
|
||
href="https://github.com/jrquick17/ng-speed-test">ng-speed-test</a> - A
|
||
light weight Angular 2+ library for checking internet speed.</li>
|
||
<li><a
|
||
href="https://github.com/ebh/ngx-http-resilience">ngx-http-resilience</a>
|
||
- Angular HttpInterceptors that provide resiliency capabilities.</li>
|
||
</ul>
|
||
<h4 id="integrations">Integrations</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/ckeditor/ckeditor5-angular">ckeditor5-angular</a>
|
||
- An official CKEditor 5 rich text editor component for Angular 2+.</li>
|
||
<li><a
|
||
href="https://github.com/ckeditor/ckeditor4-angular">ckeditor4-angular</a>
|
||
- An official CKEditor 4 rich text editor component for Angular 2+.</li>
|
||
<li><a href="https://tailwindcss.com/docs/guides/angular">TailwindCSS +
|
||
Angular</a> - Integrate Angular app with Tailwind.</li>
|
||
<li><a
|
||
href="https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations/">Sentry</a>
|
||
- Sentry is a developer-first error tracking and performance monitoring
|
||
platform.</li>
|
||
<li><a href="https://stenciljs.com/docs/angular">Stencil</a> - Stencil
|
||
can generate Angular component wrappers for your web components. This
|
||
can improve Angular performance.</li>
|
||
<li><a
|
||
href="https://www.gooddata.com/blog/frontend-integration-series-angular/">GoodData</a>
|
||
- Integrate GoodData Visualizations into your Angular application.</li>
|
||
<li><a
|
||
href="https://docs.datadoghq.com/integrations/rum_angular/">DataDog</a>
|
||
- With the Datadog Angular integration, you can resolve performance
|
||
issues quickly.</li>
|
||
<li><a
|
||
href="https://www.elastic.co/guide/en/apm/agent/rum-js/current/angular-integration.html">Elastic</a>
|
||
- Real User Monitoring JavaScript agent with Angular applications.</li>
|
||
<li><a
|
||
href="https://hyperformula.handsontable.com/guide/integration-with-angular.html#demo">HyperFormula</a>
|
||
- HyperFormula is a headless spreadsheet built in TypeScript, serving as
|
||
both a parser and evaluator of spreadsheet formulas. It can be
|
||
integrated into your browser.<br />
|
||
</li>
|
||
<li><a
|
||
href="https://docs.strich.io/angular-integration-guide.html">Strich</a>
|
||
- STRICH is a JavaScript library for real-time, multi-format barcode
|
||
scanning directly in the web browser.</li>
|
||
<li><a
|
||
href="https://community.pega.com/marketplace/component/angular-sdk">Pega</a>
|
||
- Angular SDK includes a bridge and DX components that connect the
|
||
ConstellationJS Engine to an Angular-based design system.</li>
|
||
<li><a href="https://github.com/Postcatlab/postcat">Postcat</a> - A
|
||
lightweight, extensible API tool based on Angular and Electron.</li>
|
||
<li><a href="https://docs.nativescript.org">NativeScript</a> -
|
||
NativeScript provides platform APIs directly to the JavaScript runtime
|
||
(with strong types) for a rich TypeScript development experience.</li>
|
||
<li><a href="https://bit.dev/docs/angular-introduction/">Bit</a> -
|
||
Leverage Bit to build composable software.</li>
|
||
<li><a href="https://partytown.builder.io/angular">Partytown</a> -
|
||
Relocate resource intensive third-party scripts off of the main thread
|
||
and into a web worker.</li>
|
||
<li><a
|
||
href="https://github.com/Developer-Plexscape/ngx-grapesjs">ngx-grapesjs</a>
|
||
- Angular wrapper library for <a
|
||
href="https://grapesjs.com">GrapesJS</a>.</li>
|
||
<li><a
|
||
href="https://github.com/NorthwoodsSoftware/gojs-angular">gojs-angular</a>
|
||
- A set of Angular components to manage <a
|
||
href="https://gojs.net/latest/index.html">GoJS</a> Diagrams, Palettes,
|
||
and Overviews.</li>
|
||
<li><a href="https://github.com/demike/ngx-three">ngx-three</a> - Use <a
|
||
href="https://threejs.org">Three.js</a> with your Angular project in a
|
||
declarative way.</li>
|
||
<li><a href="https://github.com/rodgc/ngx-socket-io">ngx-socket-io</a> -
|
||
<a href="https://socket.io/">Socket.IO</a> module for Angular.</li>
|
||
<li><a
|
||
href="https://github.com/angular-threejs/angular-three">angular-three</a>
|
||
- Angular Renderer for <a
|
||
href="https://github.com/mrdoob/three.js">THREE.js</a>.</li>
|
||
<li><a
|
||
href="https://github.com/limitless-angular/limitless-angular">limitless-angular</a>
|
||
- A collection of powerful Angular libraries designed to enhance the
|
||
Angular ecosystem and help developers build better applications with a
|
||
focus on <a href="https://www.sanity.io/">Sanity.io</a>
|
||
integration.</li>
|
||
<li><a href="https://github.com/DSI-HUG/ngx-sentry">ngx-sentry</a> -
|
||
Angular wrapper for <a
|
||
href="https://github.com/getsentry/sentry-javascript">Sentry JavaScript
|
||
SDK</a>.</li>
|
||
<li><a
|
||
href="https://github.com/zefoy/ngx-fabric-wrapper">ngx-fabric-wrapper</a>
|
||
- Angular wrapper library for <a
|
||
href="http://fabricjs.com/">Fabric</a>.</li>
|
||
<li><a
|
||
href="https://github.com/omnedia/ngx-three-globe">ngx-three-globe</a> -
|
||
An Angular library that provides an interactive, 3D globe visualization
|
||
built using <a href="https://threejs.org">Three.js</a>.</li>
|
||
<li><a
|
||
href="https://github.com/GetStream/stream-chat-angular">stream-chat-angular</a>
|
||
- Angular Chat SDK ➜ Stream Chat. Build a chat app with ease.</li>
|
||
<li><a href="https://github.com/fullstack-lang/gong">gong</a> - Gong (go
|
||
+ ng) is a framework for full stack development based on Go and Angular.
|
||
The Go back-end uses gin, gorm, and sqlite (a pure go sqlite, no cgo
|
||
needed). The Angular front-end uses Angular Material.</li>
|
||
<li><a href="https://github.com/Brakebein/ngx-tagify">ngx-tagify</a> -
|
||
Angular library that wraps <a
|
||
href="https://github.com/yaireo/tagify/">Tagify</a>.</li>
|
||
<li><a href="https://github.com/BerryCloud/ngx-xapi">ngx-xapi</a> -
|
||
Lightweight Angular wrapper for <a
|
||
href="https://xapi.com/">xAPI</a>.</li>
|
||
<li><a
|
||
href="https://github.com/borjamrd/ngx-notion-cms">ngx-notion-cms</a> -
|
||
Render your Notion content through your Angular application as a
|
||
CMS.</li>
|
||
<li><a
|
||
href="https://github.com/saleweaver/angular-rsocket">angular-rsocket</a>
|
||
- This service allows you to easily connect to an <a
|
||
href="https://rsocket.io/">RSocket</a> server, handle streams and
|
||
messages, and manage authentication tokens flexibly via a token
|
||
provider.</li>
|
||
<li><a href="https://github.com/yociduo/ngx-pendo">ngx-pendo</a> - A
|
||
simple wrapper to load Pendo in Angular.</li>
|
||
<li><a href="https://github.com/vandaeldev/ngx-surreal">ngx-surreal</a>
|
||
- Lightweight Angular wrapper for the <a
|
||
href="https://surrealdb.com/">SurrealDB</a> JavaScript SDK.</li>
|
||
<li><a href="https://github.com/amitdahan/ngx-filesize">ngx-filesize</a>
|
||
- Angular wrapper for <a
|
||
href="https://filesizejs.com/">filesize.js</a>.</li>
|
||
<li><a href="https://github.com/pusherman/ngx-katex">ngx-katex</a> - A
|
||
simple Angular wrapper for <a
|
||
href="https://github.com/KaTeX/KaTeX">KaTeX</a>.</li>
|
||
<li><a href="https://github.com/thanhhoa214/ngx-wagmi">ngx-wagmi</a> -
|
||
An essential toolkit to connect your Angular app to the blockchain,
|
||
bringing powerful wallet and contract interactions to your
|
||
fingertips.</li>
|
||
<li><a
|
||
href="https://github.com/topce/ngx-chessground">ngx-chessground</a> -
|
||
Angular wrapper for <a
|
||
href="https://github.com/ornicar/chessground">chessground</a>.</li>
|
||
<li><a href="https://github.com/efgiese/ngx-barcode6">ngx-barcode6</a> -
|
||
An Angular component for Angular 9+ for creating 1-D barcodes based on
|
||
<a href="https://github.com/lindell/JsBarcode">JsBarcode</a>.</li>
|
||
<li><a href="https://github.com/vedph/ngx-viz">ngx-viz</a> - Simple
|
||
Angular <a href="https://viz-js.com/">viz.js</a> wrapper to render <a
|
||
href="https://graphviz.org/doc/info/lang.html">DOT graphs</a>.</li>
|
||
<li><a
|
||
href="https://github.com/knackstedt/ngx-reactify">ngx-reactify</a> -
|
||
Library to make running Angular and React applications together
|
||
easy.</li>
|
||
<li><a href="https://github.com/AmadeusITGroup/otter">Otter</a> - A
|
||
highly modular framework whose goal is to provide a common platform to
|
||
accelerate and facilitate the development on Angular web applications.
|
||
It is split into several units to cover different aspects of these
|
||
applications (localization, testing, customization, etc.). Also, to
|
||
customize an application, metadata can be extracted from the application
|
||
source code and injected into a CMS to manage dynamic
|
||
configuration.</li>
|
||
<li><a
|
||
href="https://github.com/paddls/ngx-serializer">ngx-serializer</a> -
|
||
Angular wrapper of <span class="citation"
|
||
data-cites="paddls/ts-serializer">@paddls/ts-serializer</span>
|
||
library.</li>
|
||
<li><a
|
||
href="https://github.com/BerniHC/ngx-pocketbase">ngx-pocketbase</a> -
|
||
PocketBase Angular SDK for interacting with the <a
|
||
href="https://pocketbase.io/docs">PocketBase API</a>. Based on the <a
|
||
href="https://github.com/pocketbase/js-sdk">PocketBase JavaScript
|
||
SDK</a>.</li>
|
||
<li><a
|
||
href="https://github.com/apioo/fusio-sdk-javascript-angular">fusio-sdk-javascript-angular</a>
|
||
- This SDK library provides a flexible way to build Angular apps using
|
||
<a href="https://www.fusio-project.org/">Fusio</a> as a backend. It is
|
||
used by many Fusio related apps, i.e. the <a
|
||
href="https://github.com/apioo/fusio-apps-backend">backend</a> and <a
|
||
href="https://github.com/apioo/fusio-apps-developer">developer</a>
|
||
app.</li>
|
||
<li><a
|
||
href="https://github.com/geometricpanda/ng-storyblok">ng-storyblok</a> -
|
||
A simple way to integrate <a
|
||
href="https://www.storyblok.com/">Storyblok</a> into your Angular
|
||
application.</li>
|
||
<li><a
|
||
href="https://github.com/john310897/ng-react-bridge">ng-react-bridge</a>
|
||
- A lightweight Angular package that enables developers to seamlessly
|
||
render React components inside Angular components using a
|
||
directive.</li>
|
||
<li><a href="https://github.com/makuko/zag-angular">zag-angular</a> - An
|
||
Angular wrapper for <a
|
||
href="https://github.com/chakra-ui/zag">zag</a>.</li>
|
||
<li><a
|
||
href="https://github.com/seatsio/seatsio-angular">seatsio-angular</a> -
|
||
Angular wrapper for rendering <a
|
||
href="https://www.seats.io/">Seats.io</a> seating charts.</li>
|
||
<li><a href="https://github.com/k0swe/ngx-kel-agent">ngx-kel-agent</a> -
|
||
Client library for Angular applications to integrate with <a
|
||
href="https://github.com/k0swe/kel-agent">kel-agent</a>.</li>
|
||
<li><a href="https://github.com/siarheihuzarevich/foblex2D">foblex2D</a>
|
||
- An Angular library for 2D geometric computations, providing classes
|
||
and utilities for manipulating points, lines, vectors, rectangles, arcs,
|
||
and transformations. Used in <a href="https://flow.foblex.com/">Foblex
|
||
Flow</a> for 2D geometric operations.</li>
|
||
<li><a href="https://github.com/simonegosetto/ngx-d3">ngx-d3</a> - A <a
|
||
href="https://d3js.org/">D3</a> wrapper service for Angular applications
|
||
inspired by <a
|
||
href="https://github.com/tomwanzek/d3-ng2-service">d3-ng2-service</a>.</li>
|
||
<li><a
|
||
href="https://www.npmjs.com/package/@elastic/apm-rum-angular"><span
|
||
class="citation"
|
||
data-cites="elastic/apm-rum-angular">@elastic/apm-rum-angular</span></a>
|
||
- Elastic APM Real User Monitoring for Angular applications.</li>
|
||
<li><a href="https://github.com/ngeenx/ngx-react">ngx-react</a> - Embed
|
||
React components or apps into Angular projects.</li>
|
||
<li><a href="https://www.npmjs.com/package/@interopio/ng"><span
|
||
class="citation" data-cites="interopio/ng">@interopio/ng</span></a> -
|
||
This <a href="https://interop.io/">IO Connect</a> Angular wrapper aims
|
||
to facilitate Angular developers in initializing the IO Connect
|
||
JavaScript libraries and using IO Connect functionalities in their
|
||
projects.</li>
|
||
<li><a
|
||
href="https://github.com/bloomreach/spa-sdk/blob/main/packages/ng-sdk/README.md">Bloomreach
|
||
Angular SDK</a> - Bloomreach Angular SDK provides simplified headless
|
||
integration with <a
|
||
href="https://www.bloomreach.com/en/products/content">Bloomreach
|
||
Content</a> for Angular-based applications.</li>
|
||
<li><a href="https://github.com/sscholle/zero-angular">zero-angular</a>
|
||
- Angular bindings for <a
|
||
href="https://zero.rocicorp.dev/">Zero</a>.</li>
|
||
<li><a href="https://github.com/knackstedt/ngx-xyflow">ngx-xyflow</a> -
|
||
Angular wrapper of <a
|
||
href="https://github.com/xyflow/xyflow">xyflow</a>.</li>
|
||
<li><a href="https://github.com/retejs/angular-plugin"><span
|
||
class="citation"
|
||
data-cites="retejs/angular-plugin">@retejs/angular-plugin</span></a> -
|
||
This Angular plugin includes a classic preset featuring visual
|
||
components for nodes, connections, sockets, and input controls. It is
|
||
built on <a href="https://retejs.org/">Rete.js</a>, a customizable,
|
||
TypeScript-first framework designed for creating processing-oriented,
|
||
node-based editors.</li>
|
||
</ul>
|
||
<h4 id="internationalization">Internationalization</h4>
|
||
<ul>
|
||
<li><a href="https://github.com/jsverse/transloco/">transloco</a> - 🚀
|
||
😍 The internationalization (i18n) library for Angular.</li>
|
||
<li><a
|
||
href="https://github.com/jsverse/transloco-keys-manager">transloco-keys-manager</a>
|
||
- Tools to help reduce monotonous work.</li>
|
||
<li><a
|
||
href="https://github.com/tolgee/tolgee-js/tree/main/packages/ngx/projects/ngx-tolgee">ngx-tolgee</a>
|
||
- Web-based localization tool enabling users to translate directly in
|
||
the Angular app they develop.</li>
|
||
<li><a href="https://github.com/Lessify/localess">localess</a> -
|
||
Localess is a powerful translation management tool and content
|
||
management system built using Angular and Firebase. With Localess, you
|
||
can easily manage and translate your website or app content into
|
||
multiple languages, and it uses AI to translate faster.</li>
|
||
<li><a href="https://github.com/robisim74/angular-l10n">angular-l10n</a>
|
||
- Angular library to translate texts, dates and numbers.</li>
|
||
<li><a href="https://github.com/soluling/I18N">I18N</a> - Soluling has
|
||
implemented a collection of internationalization (I18N) APIs for .NET,
|
||
Angular and Delphi.</li>
|
||
<li><a
|
||
href="https://github.com/daniel-sc/ng-extract-i18n-merge">ng-extract-i18n-merge</a>
|
||
- Extract and merge i18n xliff translation files for Angular
|
||
projects.</li>
|
||
<li><a href="https://github.com/ngx-translate/core">ngx-translate</a> -
|
||
The internationalization (i18n) library for Angular.</li>
|
||
<li><a
|
||
href="https://github.com/larscom/ngx-translate-module-loader">ngx-translate-module-loader</a>
|
||
- Highly configurable and flexible translations loader for
|
||
<code>@ngx-translate/core</code>.</li>
|
||
<li><a
|
||
href="https://github.com/rbalet/ngx-translate-multi-http-loader">ngx-translate-multi-http-loader</a>
|
||
- A loader for ngx-translate that loads translations with http
|
||
calls.</li>
|
||
<li><a
|
||
href="https://github.com/json-derulo/angular-ecmascript-intl">angular-ecmascript-intl</a>
|
||
- Contains pipes to transform internationalization data using Intl.*
|
||
browser APIs.</li>
|
||
<li><a href="https://github.com/lokalise/i18n-ally">i18n-ally</a> - All
|
||
in one i18n extension for VS Code.</li>
|
||
<li><a
|
||
href="https://github.com/mpalourdio/intl-tel-input-ng">intl-tel-input-ng</a>
|
||
- An Angular component to easily integrate <a
|
||
href="https://github.com/jackocnr/intl-tel-input">intl-tel-input</a>.</li>
|
||
<li><a href="https://github.com/antimprisacaru/ng-intl">ng-intl</a> -
|
||
Type-safe, reactive Angular i18n library. Lazy-loaded translations,
|
||
signal-based reactivity, full TypeScript support. Efficient, flexible,
|
||
and scalable internationalization for Angular projects.</li>
|
||
<li><a
|
||
href="https://github.com/gabrie-allaigre/ngx-easy-i18n-js">ngx-easy-i18n-js</a>
|
||
- The easy internationalization (i18n) library for Angular.</li>
|
||
<li><a
|
||
href="https://github.com/romanrostislavovich/ngx-translate-lint">ngx-translate-lint</a>
|
||
- Simple CLI tools for check <code>ngx-translate</code> keys.</li>
|
||
<li><a
|
||
href="https://github.com/jonnomk/ngx-merge-json-translations">ngx-merge-json-translations</a>
|
||
- This builder helps merge the <code>messages.json</code> file, after
|
||
running extract-i18n, into target files using specified locales taking
|
||
care to delete removed keys and add new ones.</li>
|
||
<li><a
|
||
href="https://github.com/Celtian/ngx-i18n-extract-regex-cli">ngx-i18n-extract-regex-cli</a>
|
||
- Tool for extracting translations from Angular app using regex.</li>
|
||
<li><a
|
||
href="https://github.com/Celtian/ngx-translate-version">ngx-translate-version</a>
|
||
- Angular module that provides version to your language files.</li>
|
||
<li><a
|
||
href="https://github.com/adamcsk1/ngx-signal-translate">ngx-signal-translate</a>
|
||
- A signal-driven translation service.</li>
|
||
<li><a
|
||
href="https://github.com/andrei-shpileuski/ngs-plural">ngs-plural</a> -
|
||
A lightweight Angular library for handling pluralization in different
|
||
languages using a pipe and a service. It simplifies the process of
|
||
generating grammatically correct plural forms based on a numeric count
|
||
and supports custom language rules.</li>
|
||
<li><a
|
||
href="https://github.com/lephyrus/ngx-translate-messageformat-compiler">ngx-translate-messageformat-compiler</a>
|
||
- Compiler for <code>ngx-translate</code> that uses <a
|
||
href="https://github.com/messageformat/messageformat">messageformat.js</a>
|
||
to compile translations using ICU syntax for handling pluralization and
|
||
gender.</li>
|
||
<li><a href="https://github.com/DSI-HUG/ngx-g11n">ngx-g11n</a> - Angular
|
||
helpers for internationalizing and localizing your application.</li>
|
||
<li><a
|
||
href="https://github.com/ressurectit/ng-translate-extensions">ng-translate-extensions</a>
|
||
- Angular module extending ng2-translate.</li>
|
||
<li><a
|
||
href="https://github.com/darioegb/ngx-translate-routes">ngx-translate-routes</a>
|
||
- This service translates titles and route paths.</li>
|
||
<li><a
|
||
href="https://github.com/transifex/transifex-javascript/tree/master/packages/angular/projects/tx-native-angular-sdk"><span
|
||
class="citation"
|
||
data-cites="transifex/angular">@transifex/angular</span></a> - You can
|
||
easily localize Angular components using the <a
|
||
href="https://www.npmjs.com/package/@transifex/angular"><span
|
||
class="citation"
|
||
data-cites="transifex/angular">@transifex/angular</span></a> library
|
||
extension. This library extends the functionality of <a
|
||
href="https://developers.transifex.com/docs/javascript-sdk">Transifex
|
||
Native JavaScript SDK</a>.</li>
|
||
<li><a href="https://crowdin.com/">Crowdin</a> - Crowdin is AI-powered
|
||
localization software for teams and businesses. Automate the translation
|
||
of your content with 600+ apps and <a
|
||
href="https://store.crowdin.com/search?query=angular">integrations</a>.</li>
|
||
<li><a href="https://doloc.io/">doloc</a> - Instant translations in your
|
||
<a
|
||
href="https://doloc.io/getting-started/frameworks/angular/">Angular</a>
|
||
workflow.</li>
|
||
<li><a
|
||
href="https://github.com/Ascor8522/ngx-i18n-tools">ngx-i18n-tools</a> -
|
||
A collection of tools to help with the translation of Angular
|
||
applications, including an Excel and XLIFF converter, <a
|
||
href="https://github.com/Ascor8522/ngx-i18n-tools/tree/master/ngx-xlf-xlsx">ngx-xlf-xlsx</a>.</li>
|
||
<li><a
|
||
href="https://github.com/kinleyrabgay/ngx-translate-db">ngx-translate-db</a>
|
||
- A lightweight, efficient Angular translation library that uses
|
||
IndexedDB for offline storage. Perfect for applications that need to
|
||
handle translations without network dependency.</li>
|
||
<li><a
|
||
href="https://github.com/alkorschun/ngx-glagolize">ngx-glagolize</a> -
|
||
An Angular library for handling translations and localization.</li>
|
||
<li><a
|
||
href="https://github.com/andreasnicolaou/locale-translator">locale-translator</a>
|
||
- Translate any locale with the provided pipe or service.</li>
|
||
<li><a
|
||
href="https://github.com/neosh11/tldraw-web-component">tldraw-web-component</a>
|
||
- Make <a href="https://github.com/tldraw/tldraw">tldraw</a> work with
|
||
frameworks other than React; Made primarily to work with Angular.</li>
|
||
<li><a
|
||
href="https://github.com/NGneers/signal-translate">signal-translate</a>
|
||
- Translation service that is using signals at its core.</li>
|
||
<li><a
|
||
href="https://github.com/bartholomej/ngx-translate-cut">ngx-translate-cut</a>
|
||
- Angular pipe for cutting translations ✂️ 🌍 (plugin for
|
||
<code>@ngx-translate</code>).</li>
|
||
<li><a
|
||
href="https://github.com/yagcioe/ngx-signal-i18n">ngx-signal-i18n</a> -
|
||
This package provides a typesafe and lazy-loaded internationalization
|
||
(i18n) solution for Angular applications, built on top of signals for
|
||
improved reactivity. It is compatible with zoneless Angular.</li>
|
||
<li><a href="https://github.com/OGS-GmbH/ngx-translate"><span
|
||
class="citation"
|
||
data-cites="OGS-GmbH/ngx-translate">@OGS-GmbH/ngx-translate</span></a> -
|
||
A lightweight, REST-based Angular i18n library designed for seamless
|
||
internationalization with minimal setup. It supports dynamic language
|
||
switching & flexible translation management via RESTful APIs.</li>
|
||
<li><a
|
||
href="https://www.npmjs.com/package/angular-intlayer">angular-intlayer</a>
|
||
- This <a href="https://github.com/aymericzip/intlayer">intlayer</a>
|
||
package allows you to internationalize your Angular application. It
|
||
provides context providers and hooks for Angular
|
||
internationalization.</li>
|
||
<li><a
|
||
href="https://github.com/robmanganelly/ngx-translate-toolkit">ngx-translate-toolkit</a>
|
||
- An Angular library designed to extend <code>@ngx-translate/core</code>
|
||
and streamline the process of managing translations in large
|
||
projects.</li>
|
||
</ul>
|
||
<h4 id="module-federation">Module Federation</h4>
|
||
<ul>
|
||
<li><a href="https://github.com/module-federation/core"><span
|
||
class="citation"
|
||
data-cites="module-federation/core">@module-federation/core</span></a> -
|
||
Module Federation is a concept that allows developers to share code and
|
||
resources across multiple JavaScript applications.</li>
|
||
<li><a
|
||
href="https://github.com/LoaderB0T/ng-dynamic-mf">ng-dynamic-mf</a> -
|
||
Truly dynamic modules at runtime with Module Federation.</li>
|
||
<li><a
|
||
href="https://github.com/angular-architects/module-federation-plugin">module-federation-plugin</a>
|
||
- Module Federation allows loading separately compiled and deployed code
|
||
(like micro frontends or plugins) into an application. This plugin makes
|
||
Module Federation work together with Angular and the CLI.</li>
|
||
<li><a
|
||
href="https://github.com/edumserrano/webpack-module-federation-with-angular">webpack-module-federation-with-angular</a>
|
||
- Guide to learn about Webpack Module Federation with several Angular
|
||
code demos.</li>
|
||
<li><a
|
||
href="https://github.com/Seifenn/vite-module-federation-angular-test">vite-module-federation-angular-test</a>
|
||
- This repository tests the <a
|
||
href="https://github.com/module-federation/vite"><span class="citation"
|
||
data-cites="module-federation/vite">@module-federation/vite</span></a>
|
||
with Angular and AnalogJS, based on the work done in <a
|
||
href="https://github.com/brandonroberts/angular-vite">brandonroberts/angular-vite</a>.
|
||
It also tests a host with AnalogJS to test SSR. But now the module
|
||
federation plugin is not compatible with SSR.</li>
|
||
<li><a
|
||
href="https://github.com/gioboa/angular-microfrontend-demo">angular-microfrontend-demo</a>
|
||
- Module Federation Vite + Angular is now possible.</li>
|
||
<li><a
|
||
href="https://github.com/igorhms/mfe-crossframework">mfe-crossframework</a>
|
||
- Module Federation project with Angular Host, Cross-framework remotes
|
||
and without Nx.</li>
|
||
<li><a
|
||
href="https://github.com/Backbase/backbase-micro-frontends">backbase-micro-frontends</a>
|
||
- Proof of concept showcasing how legacy apps (widgets) can work
|
||
together with newer apps (journeys) via Module Federation.</li>
|
||
<li><a href="https://github.com/dkhrunov/ngx-mfe">ngx-mfe</a> - Angular
|
||
library for working with micro-frontends in Webpack 5 and plugin
|
||
ModuleFederation.</li>
|
||
<li><a
|
||
href="https://www.npmjs.com/package/npm-mfe-live-reload">npm-mfe-live-reload</a>
|
||
- This tool is designed to work in development mode and helps
|
||
automatically reload the shell application when changes are detected in
|
||
remote microfrontend applications.</li>
|
||
<li><a
|
||
href="https://github.com/eurusik/ngx-remote-component">ngx-remote-component</a>
|
||
- An Angular library for loading remote components dynamically in Nx
|
||
workspaces.</li>
|
||
<li><a
|
||
href="https://github.com/eurusik/ngx-mf-remote-loader">ngx-mf-remote-loader</a>
|
||
- SSR-compatible dynamic remote module loader for Angular + Nx Micro
|
||
Frontends.</li>
|
||
</ul>
|
||
<h4 id="monorepos">Monorepos</h4>
|
||
<ul>
|
||
<li><a href="https://moonrepo.dev/docs/guides/examples/angular">Moon</a>
|
||
- A build system and monorepo management tool for the web ecosystem,
|
||
written in Rust.</li>
|
||
<li><a href="https://github.com/nrwl/nx">Nx</a> - Nx is a build system
|
||
with built-in tooling and advanced CI capabilities. It helps you
|
||
maintain and scale monorepos, both locally and on CI.</li>
|
||
<li><a href="https://github.com/vercel/turbo">Turbo</a> - Incremental
|
||
bundler and build system optimized for JavaScript and TypeScript,
|
||
written in Rust – including Turbopack and Turborepo.</li>
|
||
</ul>
|
||
<h4 id="payments">Payments</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/adyen-examples/adyen-angular-online-payments">adyen-angular-online-payments</a>
|
||
- Accept payments on your Angular/Express-based website with cards,
|
||
wallets, and key local payment methods.</li>
|
||
<li><a
|
||
href="https://github.com/Spotflow-One/angular-spotflow-checkout">angular-spotflow-checkout</a>
|
||
- The <a href="https://www.spotflow.one/">Spotflow</a> Angular SDK
|
||
enables users to make payments with a streamlined checkout
|
||
experience.</li>
|
||
<li><a
|
||
href="https://github.com/google-pay/google-pay-button">google-pay-button</a>
|
||
- Google Pay button - React, Angular, and custom element.</li>
|
||
<li><a href="https://github.com/antonyayansi/izipay">izipay</a> -
|
||
Integrate Izipay into your project with minimal configuration and an
|
||
integrated proxy.</li>
|
||
<li><a href="https://github.com/richnologies/ngx-stripe">ngx-stripe</a>
|
||
- A comprehensive library designed for seamless integration of <a
|
||
href="https://stripe.com/docs/stripe-js"><code>Stripe Elements</code></a>
|
||
and payment processing capabilities into Angular applications.
|
||
Leveraging the powerful features of <a
|
||
href="https://stripe.com/docs/js"><code>StripeJS</code></a>, Ngx Stripe
|
||
simplifies building robust, secure, and scalable payment solutions.</li>
|
||
<li><a
|
||
href="https://github.com/dotted-labs/ngx-supabase-stripe">ngx-supabase-stripe</a>
|
||
- An Angular library for integrating Supabase and Stripe into your
|
||
applications, providing ready-to-use components that simplify the
|
||
implementation of payments and subscriptions.</li>
|
||
<li><a
|
||
href="https://github.com/solidgate-tech/angular-sdk">solidgate</a> -
|
||
With its Angular SDK, you can add Solidgate Payment Form.</li>
|
||
</ul>
|
||
<h4 id="security">Security</h4>
|
||
<ul>
|
||
<li><a href="https://angular.dev/best-practices/security">Angular
|
||
Security</a> - Best Practices</li>
|
||
<li><a
|
||
href="https://docs.github.com/en/code-security/code-scanning/introduction-to-code-scanning">Github</a>
|
||
- Code scanning is available for all public repositories on GitHub.com.
|
||
You can turn on secret scanning and use Code QL to secure your
|
||
repos.<br />
|
||
</li>
|
||
<li><a href="https://skills.github.com/">Github Skills</a> - Guided
|
||
interactive tutorials for Code Security and analysis are available.</li>
|
||
<li><a
|
||
href="https://book.hacktricks.xyz/network-services-pentesting/pentesting-web/angular">HackTricks</a>
|
||
- Angular Security Checklist.</li>
|
||
<li><a href="https://safedep.io/">SafeDep</a> - SafeDep continuously
|
||
scans open source code for vulnerabilities and malware, helping security
|
||
engineering teams proactively mitigate inherited OSS risks.</li>
|
||
<li><a href="https://socket.dev/">Socket</a> - Socket is a
|
||
developer-first security platform that protects your code from both
|
||
vulnerable and malicious dependencies.</li>
|
||
<li><a href="https://snyk.io/">Snyk</a> - Snyk is a developer security
|
||
platform that integrates directly into development tools, workflows, and
|
||
automation pipelines.</li>
|
||
</ul>
|
||
<h4 id="seo">SEO</h4>
|
||
<ul>
|
||
<li><a href="https://ngx-meta.dev"><span class="citation"
|
||
data-cites="davidlj95/ngx-meta">@davidlj95/ngx-meta</span></a> - Set
|
||
your Angular site’s metadata: standard meta tags, Open Graph, X Cards,
|
||
JSON-LD, … Supports SSR (and Angular Universal). Use a service. Use
|
||
routes’ data. Set it up in a flash! 🚀</li>
|
||
<li><a href="https://www.npmjs.com/package/@ngaox/seo">ngaox</a> - Take
|
||
Your Angular App Development to the Next Level with Ngaox: Seamless
|
||
Content Integration, SVG Icon Optimization & Inlining, Advanced SEO
|
||
& Social-Media Management, and More.</li>
|
||
<li><a href="https://github.com/maddevsio/seo-analyzer">seo-analyzer</a>
|
||
- The library for analyze a HTML file to show all of the SEO
|
||
defects.</li>
|
||
<li><a
|
||
href="https://github.com/samvloeberghs/kwerri-oss/tree/main">ngx-seo</a>
|
||
- Kwerri OSS: samvloeberghs.be + ngx-seo.</li>
|
||
<li><a
|
||
href="https://github.com/ganatan/angular-react-seo">angular-react-seo</a>
|
||
- Angular & React Examples SEO (Search engine optimization).</li>
|
||
<li><a href="https://www.npmjs.com/package/@unhead/angular"><span
|
||
class="citation" data-cites="unhead/angular">@unhead/angular</span></a>
|
||
- Full-stack <code><head></code> management for Angular
|
||
applications.</li>
|
||
<li><a
|
||
href="https://github.com/mbsh-code/seo-manager-pro">seo-manager-pro</a>
|
||
- A powerful SEO Manager for Angular, React, Vue, and Vanilla JS
|
||
projects. Easily set meta tags, Open Graph tags, Schema.org structured
|
||
data, canonical URLs, robots meta, and more!</li>
|
||
</ul>
|
||
<h4 id="server-side-rendering">Server-Side Rendering</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://angular.dev/guide/ssr#enable-server-side-rendering">Official
|
||
web page</a> - Documentation for the new SSR package built into the
|
||
framework.</li>
|
||
<li><a
|
||
href="https://github.com/chrisguttandin/angular-prerender">angular-prerender</a>
|
||
- A command line tool to prerender Angular Apps.</li>
|
||
<li><a href="https://analogjs.org/">analogjs</a> - Fullstack Angular
|
||
meta-framework supports both server-side rendering (SSR) and static site
|
||
generation (SSG) of Angular applications.</li>
|
||
<li><a
|
||
href="https://github.com/xsip/ngx-ssr-code-remover">ngx-ssr-code-remover</a>
|
||
- Post processor to remove SSR Code from bundles when served.</li>
|
||
<li><a href="https://github.com/treatyjs/treaty">treaty</a> - The meta
|
||
framework for Angular. An alternative to Analog.</li>
|
||
<li><a
|
||
href="https://github.com/joshuamorony/analog-stuff">analog-stuff</a> -
|
||
Extra stuff for AnalogJS including <code>agx-remark-rehype</code>.</li>
|
||
<li><a href="https://github.com/lennybakkalian/ngx-trpc">ngx-trpc</a> -
|
||
Angular tRPC client with SSR, RxJS, Signals and Subscriptions
|
||
Support.</li>
|
||
<li><a
|
||
href="https://github.com/json-derulo/ngx-sitemaps">ngx-sitemaps</a> -
|
||
Generate sitemaps from Angular prerendered routes.</li>
|
||
</ul>
|
||
<h4 id="site-templates">Site Templates</h4>
|
||
<h5 id="free">Free</h5>
|
||
<ul>
|
||
<li><a href="https://github.com/ng-matero/ng-matero">ng-matero</a> -
|
||
Angular Material admin dashboard template.</li>
|
||
<li><a
|
||
href="https://github.com/coreui/coreui-free-angular-admin-template">coreui-free-angular-admin-template</a>
|
||
- CoreUI Angular is free Angular admin template based on Bootstrap
|
||
5.</li>
|
||
<li><a href="https://github.com/primefaces/sakai-ng">sakai-ng</a> - Free
|
||
Angular Admin Template by PrimeNG.</li>
|
||
<li><a
|
||
href="https://github.com/DevExpress/devextreme-angular-template">devextreme-angular-template</a>
|
||
- Responsive Application Layout Templates based on DevExtreme Angular
|
||
Components.</li>
|
||
<li><a href="https://github.com/emonney/QuickApp">QuickApp</a> - ASP.NET
|
||
Core / Angular startup project template with complete login, user and
|
||
role management. Plus other useful services for Quick Application
|
||
Development.</li>
|
||
<li><a
|
||
href="https://github.com/wrappixel/material-pro-angular-lite">material-pro-angular-lite</a>
|
||
- MaterialPro Angular Lite is high quality free angular material
|
||
template / theme from WrapPixel. You can download and use for Personal
|
||
as well as Commercial Projects.</li>
|
||
<li><a
|
||
href="https://github.com/wrappixel/spike-angular-free">spike-angular-free</a>
|
||
- Spike is the most powerful & comprehensive free Angular admin
|
||
template based on Material Angular.</li>
|
||
<li><a
|
||
href="https://github.com/wrappixel/Flexy-admin-angular-lite">Flexy-admin-angular-lite</a>
|
||
- Flexy is the Most Powerful & Comprehensive free Angular admin
|
||
template based on Material Angular.</li>
|
||
<li><a
|
||
href="https://github.com/netlify-templates/angular-quickstart">angular-quickstart</a>
|
||
- A bare-bones Angular template to get you deployed to Netlify
|
||
fast!</li>
|
||
<li><a
|
||
href="https://github.com/phaserjs/template-angular">template-angular</a>
|
||
- Phaser 3 TypeScript project template that uses the Angular framework
|
||
and Vite for bundling.</li>
|
||
<li><a href="https://github.com/mugifly/angular-nest">angular-nest</a> -
|
||
Simple web app template with Angular + NestJS + ng-openapi-gen.</li>
|
||
<li><a
|
||
href="https://github.com/tarlepp/angular-ngrx-frontend">angular-ngrx-frontend</a>
|
||
- Angular NgRx powered frontend template for Symfony (or similar)
|
||
backend.</li>
|
||
<li><a
|
||
href="https://github.com/JohnnyDevNull/ng-three-template">Threejs</a> -
|
||
New Three.js starter app.</li>
|
||
<li><a href="https://github.com/ZenSoftware/zen">zen</a> - Nest + Prisma
|
||
+ Apollo + Angular Full Stack GraphQL Starter Kit.</li>
|
||
<li><a
|
||
href="https://colorlib.com/wp/free-angular-templates/">Colorlib</a></li>
|
||
<li><a
|
||
href="https://htmlrev.com/free-angular-templates.html">HTMLrev</a></li>
|
||
<li><a
|
||
href="https://github.com/pixelcave/tailkit-starter-kit-angular">tailkit-starter-kit-angular</a>
|
||
- Angular Starter Kit for using <a href="https://tailkit.com/">Tailkit
|
||
UI</a> components out of the box in your project.</li>
|
||
<li><a
|
||
href="https://github.com/lannodev/angular-tailwind">angular-tailwind</a>
|
||
- Angular & Tailwind CSS Admin Dashboard Starter Kit.</li>
|
||
<li><a
|
||
href="https://github.com/svierk/angular-starter-kit">angular-starter-kit</a>
|
||
- Angular project template with Prettier, Linter, Git-Hooks and VS Code
|
||
settings.</li>
|
||
<li><a
|
||
href="https://github.com/FRACTAL-GAME-STUDIOS/fractal_boilerplate_lua_angular">fractal-boilerplate-lua-angular</a>
|
||
- Basic Angular & Lua - FiveM Boilerplate: A streamlined starter kit
|
||
for web and in-game development with hot builds and utility
|
||
scripts.</li>
|
||
<li><a
|
||
href="https://github.com/descope-sample-apps/angular-sample-app">angular-sample-app</a>
|
||
- This sample app demonstrates how to integrate the <a
|
||
href="https://www.descope.com">Descope</a> authentication service into
|
||
an Angular application. This application includes a login screen using
|
||
Descope Angular SDK, a user dashboard to display user information and a
|
||
navigation bar that dynamically adjusts based on the user’s
|
||
authentication state.</li>
|
||
<li><a
|
||
href="https://github.com/FullStacksDev/angular-and-firebase-template">angular-and-firebase-template</a>
|
||
- An opinionated full-stack starting point for building a web app, using
|
||
Angular and Firebase.</li>
|
||
<li><a
|
||
href="https://github.com/codedthemes/berry-free-angular-admin-template">berry-free-angular-admin-template</a>
|
||
- Berry is a free angular admin dashboard template built with Angular
|
||
and latest Bootstrap 5. It is meant to provide the best possible User
|
||
Experience with highly customizable feature-rich pages.</li>
|
||
<li><a
|
||
href="https://github.com/codedthemes/gradient-able-free-admin-template">gradient-able-free-admin-template</a>
|
||
- Gradient able free bootstrap, angular, react admin template.</li>
|
||
<li><a
|
||
href="https://github.com/codedthemes/mantis-free-angular-admin-template">mantis-free-angular-admin-template</a></li>
|
||
<li><a
|
||
href="https://github.com/codedthemes/datta-able-free-angular-admin-template">datta-able-free-angular-admin-template</a></li>
|
||
<li><a
|
||
href="https://github.com/sanity-io/sanity-template-angular-clean">sanity-template-angular-clean</a>
|
||
- A clean Angular SPA that gets content from <a
|
||
href="https://www.sanity.io/">Sanity</a>.</li>
|
||
<li><a
|
||
href="https://github.com/hawkgs/angular-templates">angular-templates</a>
|
||
- A set of Angular templates for common web apps.</li>
|
||
<li><a href="https://github.com/SharpLogic/LightNap">LightNap</a> -
|
||
LightNap (lightweight .NET Core/Angular/PrimeNG) is a full stack starter
|
||
kit designed to provide a boost to Single Page Applications (SPA). It
|
||
includes built-in support for ASP.NET Core Identity, JWT token
|
||
management, and administrative features for managing identity, offering
|
||
a solid foundation to be extended for any application scenario.</li>
|
||
<li><a
|
||
href="https://github.com/uzenith360/ngx-package-starter">ngx-package-starter</a>
|
||
- An Angular library NPM starter (or example) project to ease setup of
|
||
Angular libraries as NPM packages from your GitHub repo.</li>
|
||
<li><a href="https://github.com/cristobalgvera/angular-template"><span
|
||
class="citation"
|
||
data-cites="cristobalgvera/angular-template">@cristobalgvera/angular-template</span></a>
|
||
- Project to easily start an Angular project using Server Side
|
||
Rendering, Angular Material, and Tailwind CSS. It also includes
|
||
development tools to easy your workflow.</li>
|
||
<li><a
|
||
href="https://github.com/hofiorg/angular-boilerplate">angular-boilerplate</a>
|
||
- A boilerplate for modern web apps using Angular 18 with Bootstrap,
|
||
Angular Material, and NgRx for responsive, stateful UIs. Back-end is
|
||
powered by Spring Boot with a RESTful JSON API. Features include modular
|
||
architecture and advanced table handling with ngx-datatable.</li>
|
||
<li><a href="https://github.com/touhidrahman/nx-starter">nx-starter</a>
|
||
- Nx powered starter project for Angular with SpartanUI.</li>
|
||
<li><a
|
||
href="https://github.com/adrian-taralunga/angular-material-tailwind-playwright-starter">angular-material-tailwind-playwright-starter</a>
|
||
- Angular 19 with material, tailwind, jest, playwright, and ngxs.</li>
|
||
<li><a href="https://github.com/tbarracha/Angspire">Angspire</a> -
|
||
Angular + .NET (monorepo) project template designed to simplify
|
||
development with out-of-the-box features like (basic) user
|
||
authentication and frontend themes, reducing setup time and providing a
|
||
scalable, maintainable foundation for your applications.</li>
|
||
<li><a
|
||
href="https://github.com/keycloakify/keycloakify-starter-angular-vite">keycloakify-starter-angular-vite</a>
|
||
- Angular + Vite Starter for <a
|
||
href="https://www.keycloakify.dev/">Keycloakify 11</a>.</li>
|
||
<li><a href="https://github.com/rainerhahnekamp/angular-starter"><span
|
||
class="citation"
|
||
data-cites="rainerhahnekamp/angular-starter">@rainerhahnekamp/angular-starter</span></a>
|
||
- A starter project for a modern Angular 19 application.</li>
|
||
<li><a
|
||
href="https://github.com/Yewo-Devs/BoilerPlate-FirebaseAngular">BoilerPlate-FirebaseAngular</a>
|
||
- Starting point for apps built using .NET, Angular, and Firebase.</li>
|
||
<li><a
|
||
href="https://github.com/joematthews/extreme-angular">extreme-angular</a>
|
||
- A starter template with pre-configured dev tools that enforce best
|
||
practices for creating clean, maintainable, and accessible web
|
||
apps.</li>
|
||
<li><a href="https://github.com/wlucha/angular-starter"><span
|
||
class="citation"
|
||
data-cites="wlucha/angular-starter">@wlucha/angular-starter</span></a> -
|
||
Angular 19 Starter with Storybook, Transloco, Jest, Cypress, Docker,
|
||
ESLint, Material, & Prettier.</li>
|
||
<li><a
|
||
href="https://github.com/carlossalasamper/angular-clean-architecture">angular-clean-architecture</a>
|
||
- An Angular scaffold with a clean architecture that is easy to
|
||
understand.</li>
|
||
<li><a
|
||
href="https://github.com/dataclouder-dev/dataclouder-template-angular">dataclouder-template-angular</a>
|
||
- A ready-to-use Angular/Ionic template with Firebase Authentication
|
||
integration.</li>
|
||
<li><a
|
||
href="https://github.com/Kei-K23/angular-tailwind-e-commerce-template">angular-tailwind-e-commerce-template</a>
|
||
- This responsive e-commerce template, built with Angular and
|
||
TailwindCSS, combines modern aesthetics with functionality. Designed as
|
||
a foundation for developing robust e-commerce applications, it features
|
||
a sleek, customizable design, perfect for minimalist online shops.</li>
|
||
<li><a
|
||
href="https://github.com/r3zafa/ngx-lib-starter-kit">ngx-lib-starter-kit</a>
|
||
- This boilerplate helps you quickly set up and develop Angular
|
||
libraries. It includes a pre-configured structure for components,
|
||
services, utilities, themes, assets, and more. The project is optimized
|
||
for scalability and maintainability.</li>
|
||
<li><a
|
||
href="https://github.com/themesberg/tailwind-angular-starter">tailwind-angular-starter</a>
|
||
- Free and open-source starter project to help you get started with
|
||
Angular, Tailwind CSS, and the <a
|
||
href="https://github.com/themesberg/flowbite-angular">Flowbite UI
|
||
components</a>.</li>
|
||
<li><a
|
||
href="https://github.com/r3zafa/ngx-app-starter-kit">ngx-app-starter-kit</a>
|
||
- A modern Angular 18+ starter kit with Docker, devcontainer, and
|
||
Angular Material integration for rapid, scalable web app
|
||
development.</li>
|
||
<li><a
|
||
href="https://github.com/codebangla/signal-admin">signal-admin</a> - A
|
||
modern admin panel built with Angular 20, Angular Material, and
|
||
TailwindCSS. Features a responsive design with collapsible sidebar, user
|
||
management, forms, and UI components.</li>
|
||
<li><a href="https://github.com/angularcafe/ngXpress">ngXpress</a> - The
|
||
Full-Stack Angular Starter Kit (SSR, Zoneless, Express 5, Prisma,
|
||
better-auth, Tailwind CSS 4).</li>
|
||
<li><a
|
||
href="https://github.com/thatsamsonkid/spartan-stack-starter">spartan-stack-starter</a>
|
||
- An Opinionated Template Project Starter using Spartan Stack.</li>
|
||
</ul>
|
||
<h5 id="paid">Paid</h5>
|
||
<ul>
|
||
<li><a href="https://adminmart.com/templates/angular-dashboard/">Admin
|
||
Mart</a></li>
|
||
<li><a href="https://angular-templates.io/">Angular-Templates</a></li>
|
||
<li><a href="https://docs.jetproject.dev/">Jet</a> - Jet is the ultimate
|
||
Angular + Material Design boilerplate to build ambitious, robust web
|
||
apps. Jet satisfies 60+ functional and non-functional stories.</li>
|
||
<li><a href="https://ngfast.com/">NgFast</a> - The Angular boilerplate
|
||
for building SaaS, landing pages, and web apps fast—turning your ideas
|
||
into income.</li>
|
||
<li><a href="https://nzoni.app/">Nzoni</a> - Launch your SAAS in days
|
||
with Angular.</li>
|
||
<li><a href="https://themeforest.net/search/angular">Theme
|
||
Forest</a></li>
|
||
<li><a href="https://template.giacomobellazzi.com/">Vortex</a> - A
|
||
high-performance web application template built with Angular and Java,
|
||
designed to deliver seamless user experiences and powerful backend
|
||
solutions.</li>
|
||
<li><a
|
||
href="https://www.wrappixel.com/templates/category/angular-templates/">Wrap
|
||
Pixel</a></li>
|
||
</ul>
|
||
<h4 id="testing">Testing</h4>
|
||
<h5 id="e2e">e2e</h5>
|
||
<ul>
|
||
<li><a href="https://www.cypress.io/">cypress</a> - End to End and
|
||
Component Testing for Angular.</li>
|
||
<li><a
|
||
href="https://github.com/jscutlery/devkit/tree/main/packages/cypress-harness">cypress-harness</a>
|
||
- This library provides Cypress support to Component Test
|
||
Harnesses.</li>
|
||
<li><a
|
||
href="https://github.com/MohamedSci/cypress-angular-commands">cypress-angular-commands</a>
|
||
- A robust, production-ready collection of reusable Cypress custom
|
||
commands specifically tailored for modern Angular-based enterprise
|
||
applications and ERP systems.</li>
|
||
<li><a
|
||
href="https://github.com/GonzaloCarmenado/lib-e2e-cypress-for-dummys">lib-e2e-cypress-for-dummys</a>
|
||
- An Angular library that automatically records the Cypress commands
|
||
needed to test your application while you browse and use the interface.
|
||
Ideal for developers who want to speed up E2E test creation without
|
||
writing them manually.</li>
|
||
<li><a href="https://testcafe.io/">testcafe</a> - TestCafe is a
|
||
user-friendly end-to-end testing solution. Free and open-source test
|
||
runner. Powerful desktop app.</li>
|
||
<li><a href="https://github.com/webdriverio/webdriverio">webdriverio</a>
|
||
- Next-gen browser and mobile automation test framework for
|
||
Node.js.</li>
|
||
<li><a
|
||
href="https://pptr.dev/guides/ng-schematics/#getting-started">Puppeteer
|
||
Angular Schematic</a> - Adds <a
|
||
href="https://github.com/puppeteer/puppeteer">Puppeteer-based</a> e2e
|
||
tests to your Angular project.</li>
|
||
<li><a
|
||
href="https://github.com/bgotink/ngx-playwright">ngx-playwright</a> -
|
||
Tools to run Playwright e2e tests in an Angular workspace.</li>
|
||
<li><a
|
||
href="https://github.com/playwright-community/playwright-ng-schematics">playwright-ng-schematics</a>
|
||
- Adds Playwright Test to your Angular project.</li>
|
||
<li><a
|
||
href="https://github.com/bgotink/playwright-coverage">playwright-coverage</a>
|
||
- Report coverage on playwright tests using v8 coverage, without
|
||
requiring any instrumentation.</li>
|
||
<li><a href="https://www.cy2pw.com/">Cypress to Playwright</a> - A
|
||
curated collection of resources that can help you to migrate your test
|
||
suite from Cypress to Playwright.</li>
|
||
<li><a
|
||
href="https://chromewebstore.google.com/detail/playwright-chrome-recorde/bfnbgoehgplaehdceponclakmhlgjlpd">Playwright
|
||
Chrome Recorder</a> - Export Chromium recorder tab data to Playwright
|
||
tests. This gives you a nice starting point that you can refine to
|
||
modern Playwright.</li>
|
||
<li><a
|
||
href="https://github.com/microsoft/playwright-mcp">playwright-mcp</a> -
|
||
A Model Context Protocol (MCP) server that provides browser automation
|
||
capabilities using Playwright. This server enables LLMs to interact with
|
||
web pages through structured accessibility snapshots, bypassing the need
|
||
for screenshots or visually-tuned models.</li>
|
||
</ul>
|
||
<h5 id="component">Component</h5>
|
||
<ul>
|
||
<li><a
|
||
href="https://testing-library.com/docs/angular-testing-library/intro/">Angular
|
||
Testing Library</a> - Angular Testing Library builds on top of DOM
|
||
Testing Library by adding APIs for working with Angular components.</li>
|
||
<li><a
|
||
href="https://github.com/jscutlery/devkit/tree/main/packages/playwright-ct-angular"><span
|
||
class="citation"
|
||
data-cites="jscutlery/playwright-ct-angular">@jscutlery/playwright-ct-angular</span></a>
|
||
- Playwright Angular component testing.</li>
|
||
<li><a
|
||
href="https://github.com/Ninja-Squad/ngx-speculoos">ngx-speculoos</a> -
|
||
Simpler, cleaner Angular unit tests.</li>
|
||
<li><a
|
||
href="https://github.com/duluca/angular-unit-test-helper">angular-unit-test-helper</a>
|
||
- Helper functions to help write unit tests in Angular using mocks and
|
||
spies.</li>
|
||
<li><a
|
||
href="https://github.com/nightwatchjs/nightwatch-plugin-angular">nightwatch-plugin-angular</a>
|
||
- Official <a href="https://nightwatchjs.org/">Nightwatch</a> plugin
|
||
which adds component testing support for Angular apps. It uses the
|
||
Webpack DevServer under the hood. Requires Nightwatch 2.4+.</li>
|
||
<li><a href="https://www.meticulous.ai/">Meticulous AI</a> - Cover the
|
||
1000s of edge cases of your application - without writing or maintaining
|
||
a single test.</li>
|
||
<li><a href="https://jasmine.github.io/">jasmine</a> - Simple JavaScript
|
||
testing.</li>
|
||
<li><a
|
||
href="https://github.com/maksimr/karma-image-snapshot">karma-image-snapshot</a>
|
||
- Karma jasmine matcher that performs image comparisons based on <a
|
||
href="https://github.com/americanexpress/jest-image-snapshot">jest-image-snapshot</a>
|
||
for visual regression testing.</li>
|
||
<li><a
|
||
href="https://github.com/trion-development/docker-ng-cli-karma">docker-ng-cli-karma</a>
|
||
- Angular docker image capable of running Karma with Chrome.</li>
|
||
<li><a
|
||
href="https://github.com/lazycuh/angular-testing-kit">angular-testing-kit</a>
|
||
- A set of convenient utilities to make Angular testing with Jasmine and
|
||
Karma simpler.</li>
|
||
<li><a href="https://jestjs.io/">jest</a> - Jest is a delightful
|
||
JavaScript Testing Framework with a focus on simplicity.</li>
|
||
<li><a
|
||
href="https://github.com/thymikee/jest-preset-angular">jest-preset-angular</a>
|
||
- Jest configuration preset for Angular projects.</li>
|
||
<li><a href="https://github.com/nvh95/jest-preview">jest-preview</a> -
|
||
Debug your Jest tests. Effortlessly.</li>
|
||
<li><a href="https://github.com/just-jeb/jest-marbles">jest-marbles</a>
|
||
- Helpers library for marbles testing with Jest.</li>
|
||
<li><a href="https://github.com/skovhus/jest-codemods">jest-codemods</a>
|
||
- Codemods for migrating to Jest.</li>
|
||
<li><a href="https://github.com/kulshekhar/ts-jest">ts-jest</a> - A Jest
|
||
transformer with source map support that lets you use Jest to test
|
||
projects written in TypeScript.</li>
|
||
<li><a href="https://vitest.dev/">vitest</a> - A Vite-native testing
|
||
framework.</li>
|
||
<li><a href="https://www.startearly.ai/">Early AI</a> - Save time,
|
||
enhance code coverage, and ensure quality with Early’s automatically
|
||
generated, verified, and validated unit tests. Works with Jest and
|
||
Vitest.</li>
|
||
<li><a
|
||
href="https://github.com/jscutlery/devkit/tree/main/packages/swc-angular">swc-angular</a>
|
||
- This is a set of Angular presets that enable you to use SWC (Speedy
|
||
Web Compiler) with Jest or Vitest.</li>
|
||
<li><a
|
||
href="https://github.com/jscutlery/devkit/tree/main/packages/swc-angular-plugin">swc-angular-plugin</a>
|
||
- SWC (Speedy Web Compiler) is a lightning-fast JavaScript/TypeScript
|
||
compiler, but it doesn’t support Angular so you need this plugin.</li>
|
||
<li><a href="https://github.com/badisi/wdio-harness">wdio-harness</a> -
|
||
WebdriverIO support for Angular component test harnesses.</li>
|
||
<li><a href="https://github.com/testronaut/testronaut">testronaut</a> -
|
||
<a href="https://testronaut.github.io/testronaut/">Testronaut</a>
|
||
revolutionizes Angular component testing by running components in a real
|
||
browser with Angular’s own build process, ensuring they behave exactly
|
||
as they do in production. It eliminates mocks and guesswork, allowing
|
||
developers to visually inspect output and write tests using Playwright’s
|
||
powerful API for precise, real-world validation.</li>
|
||
</ul>
|
||
<h5 id="guides">Guides</h5>
|
||
<ul>
|
||
<li><a href="https://testing-angular.com">Testing Angular – A Guide to
|
||
Robust Angular Applications</a> - A Guide to Robust Angular
|
||
Applications. A free online book and e-book.</li>
|
||
<li><a
|
||
href="https://github.com/kristiyan-velkov/angular-tour-of-heroes-jest-100-coverage">angular-tour-of-heroes-jest-100-coverage</a>
|
||
- 100% unit testing coverage of the popular Angular demo app - Tour of
|
||
Heroes.</li>
|
||
<li><a
|
||
href="https://github.com/rainerhahnekamp/how-do-i-test">how-do-i-test</a>
|
||
- Repository representing different testing use cases for Angular and
|
||
Spring.</li>
|
||
<li><a href="https://timdeschryver.dev/blog?q=Testing">Tim Deschryver
|
||
Blog</a> - A rich source of valuable perspectives and practical tips on
|
||
testing.</li>
|
||
</ul>
|
||
<h5 id="helpers">Helpers</h5>
|
||
<ul>
|
||
<li><a href="https://github.com/help-me-mom/ng-mocks">ng-mocks</a> -
|
||
Angular testing library for mocking components, directives, pipes,
|
||
services and facilitating TestBed setup.</li>
|
||
<li><a
|
||
href="https://github.com/help-me-mom/ng-mocks-sandbox">ng-mocks-sandbox</a>
|
||
- A repo with guides and examples for unit tests in Angular applications
|
||
using ng-mocks.</li>
|
||
<li><a href="https://www.npmjs.com/package/scuri">Auto-create and
|
||
-update tests tool</a> - Automate Angular unit test and boilerplate with
|
||
this schematic.</li>
|
||
<li><a
|
||
href="https://github.com/ngworker/ngworker/tree/main/packages/spectacular">spectacular</a>
|
||
- Spectacular offers test harnesses for Angular applications and
|
||
libraries.</li>
|
||
<li><a href="https://material.angular.dev/cdk/testing/overview"><span
|
||
class="citation"
|
||
data-cites="angular/cdk/testing">@angular/cdk/testing</span></a> -
|
||
<code>@angular/cdk/testing</code> provides infrastructure to help with
|
||
testing Angular components.</li>
|
||
<li><a
|
||
href="https://github.com/FrancescoBorzi/ngx-page-object-model">ngx-page-object-model</a>
|
||
- This library streamlines the process of writing unit tests for Angular
|
||
UI Components by utilizing the Page Object Model (POM) design pattern.
|
||
By adopting the POM design pattern, you can create an additional layer
|
||
of abstraction, effectively separating your test logic from the DOM
|
||
manipulation logic.</li>
|
||
<li><a href="https://github.com/Centigrade/ngtx">ngtx</a> -
|
||
<code>ngtx</code> stands for “A<strong>ng</strong>ular
|
||
<strong>T</strong>esting E<strong>x</strong>tensions” and is a small set
|
||
of functions aiming to make your life easier when testing Angular
|
||
components.</li>
|
||
<li><a
|
||
href="https://github.com/remscodes/ngx-testing-tools">ngx-testing-tools</a>
|
||
- Provides high-level utilities and reduces boilerplate for testing
|
||
Angular applications.</li>
|
||
<li><a href="https://github.com/ngneat/spectator">spectator</a> - A
|
||
Powerful Tool to Simplify Your Angular Tests.</li>
|
||
<li><a
|
||
href="https://github.com/stryker-mutator/stryker-js">stryker-js</a> -
|
||
Mutation testing for JavaScript and friends.</li>
|
||
<li><a href="https://github.com/mswjs/msw">msw</a> - Seamless
|
||
REST/GraphQL API mocking library for browser and Node.js.</li>
|
||
<li><a
|
||
href="https://github.com/getsaf/shallow-render">shallow-render</a> -
|
||
Angular testing made easy with shallow rendering and easy mocking.</li>
|
||
<li><a href="https://github.com/storybookjs/testing-angular"><span
|
||
class="citation"
|
||
data-cites="storybookjs/testing-angular">@storybookjs/testing-angular</span></a>
|
||
- Testing utilities that allow you to reuse your stories in your unit
|
||
tests.</li>
|
||
<li><a
|
||
href="https://github.com/kirill-kolomin/ngx-testbox">ngx-testbox</a> - 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.</li>
|
||
</ul>
|
||
<h4 id="updating">Updating</h4>
|
||
<ul>
|
||
<li><a href="https://angular.dev/update-guide">angular update guide</a>
|
||
- Interactive guide to help you migrate from one version of Angular to
|
||
another.<br />
|
||
</li>
|
||
<li><a href="https://angular.dev/cli/update">ng update</a> - Use the CLI
|
||
to update your project or try new Angular features by adding the
|
||
<code>--next</code> flag.</li>
|
||
<li><a href="https://angular.dev/reference/migrations">migrations</a> -
|
||
Angular offers schematics to help update your project for you. You can
|
||
convert your project to standalone components, the new control flow
|
||
syntax, and more by using one of the Angular built-in schematics.</li>
|
||
<li><a href="https://github.com/taiga-family/ng-morph">ng-morph</a> -
|
||
Code mutations in your project or schematics were never easier than
|
||
now.</li>
|
||
<li><a href="https://github.com/eneajaho/ngx-libs">ngx-libs</a> -
|
||
Angular Libraries Support lists community libs support for each Angular
|
||
version.</li>
|
||
<li><a
|
||
href="https://github.com/fast-facts/ng-update">fast-facts/ng-update</a>
|
||
- A Github Action that keeps your Angular CLI-based projects up-to-date
|
||
via automated PRs based on <code>ng update</code>.</li>
|
||
<li><a
|
||
href="https://github.com/DSI-HUG/ngx-app-updater">npx-app-updater</a> -
|
||
When a new version of your application is deployed, this library will
|
||
trigger a user notification to inform them that updates are
|
||
available.</li>
|
||
<li><a
|
||
href="https://github.com/Celtian/ngx-update-app">ngx-update-app</a> -
|
||
Angular directive for updating app via service workers.</li>
|
||
<li><a href="https://www.angular.courses/caniuse">Angular Caniuse</a> -
|
||
Track Angular features from preview to stable stages.</li>
|
||
<li><a
|
||
href="https://github.com/angular-sanctuary/ngx-boomer">ngx-boomer</a> -
|
||
This project is a straightforward utility designed to enforce rules that
|
||
preserve Angular’s previous naming conventions in Angular 20.</li>
|
||
</ul>
|
||
<hr />
|
||
<h3 id="third-party-components">Third Party Components</h3>
|
||
<h4 id="animations">Animations</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/tsparticles/angular/#readme">tsparticles</a> -
|
||
A component to easily add Particles animations to your Angular
|
||
application.</li>
|
||
<li><a
|
||
href="https://github.com/ChellappanRajan/ngx-confetti-explosion">ngx-confetti-explosion</a>
|
||
- Confetti in Angular.</li>
|
||
<li><a href="https://github.com/ngx-lottie/ngx-lottie">ngx-lottie</a> -
|
||
Fully customizable Angular component for rendering After Effects
|
||
animations. Compatible with Angular 9+.</li>
|
||
<li><a
|
||
href="https://github.com/williamjuan027/angular-animations-explorer">angular-animations-explorer</a>
|
||
- A resource to showcase the different animations that you could do with
|
||
Angular.</li>
|
||
<li><a
|
||
href="https://github.com/namitoyokota/ngx-notation-reveal">ngx-notation-reveal</a>
|
||
- Angular component to add rough notation animation when element is
|
||
visible.</li>
|
||
<li><a href="https://github.com/shiv-source/ngx-typed2">ngx-typed2</a> -
|
||
An Angular Typing Animation Library.</li>
|
||
<li><a
|
||
href="https://github.com/hm21/ngx-count-animation">ngx-count-animation</a>
|
||
- 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.</li>
|
||
<li><a
|
||
href="https://github.com/ajitzero/ng-auto-animate">ng-auto-animate</a> -
|
||
Angular Directive (library) for FormKit’s <a
|
||
href="https://auto-animate.formkit.com">Auto Animate</a>.</li>
|
||
<li><a
|
||
href="https://github.com/Char2sGu/layout-projection">layout-projection</a>
|
||
- Beautify the Web with awesome layout animations.</li>
|
||
<li><a
|
||
href="https://github.com/DerStimmler/ngx-easy-view-transitions">ngx-easy-view-transitions</a>
|
||
- Angular library for easier use of the View Transitions API.</li>
|
||
<li><a
|
||
href="https://github.com/SkyZeroZx/ngx-typed-writer">ngx-typed-writer</a>
|
||
- A Native Angular 2+ Typing Animation Library (Angular SSR and Angular
|
||
Universal Friendly).</li>
|
||
<li><a
|
||
href="https://github.com/omnedia/ngx-number-ticker">ngx-number-ticker</a>
|
||
- A simple number ticker effect to animate counting.</li>
|
||
<li><a
|
||
href="https://github.com/omnedia/ngx-word-rotation">ngx-word-rotation</a>
|
||
- An Angular library designed to facilitate word rotation animations
|
||
within Angular applications.</li>
|
||
<li><a
|
||
href="https://github.com/omnedia/ngx-word-morph">ngx-word-morph</a> - An
|
||
Angular library designed to facilitate word morphing animations within
|
||
Angular applications.</li>
|
||
<li><a
|
||
href="https://github.com/omnedia/ngx-cryptic-text">ngx-cryptic-text</a>
|
||
- An Angular library that provides a cryptic text animation effect. The
|
||
component animates text by randomly switching letters until the correct
|
||
characters appear.</li>
|
||
<li><a
|
||
href="https://github.com/omnedia/ngx-word-pullup">ngx-word-pullup</a> -
|
||
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.</li>
|
||
<li><a
|
||
href="https://github.com/omnedia/ngx-typewriter">ngx-typewriter</a> - A
|
||
lightweight and easy-to-use library for creating typewriter effects. It
|
||
uses RxJS to manage the typewriting effect, ensuring smooth and
|
||
customizable animations.</li>
|
||
<li><a
|
||
href="https://github.com/omnedia/ngx-gradient-text">ngx-gradient-text</a>
|
||
- An Angular library that provides a dynamic gradient animation effect
|
||
for text. This component allows you to display text with a smooth,
|
||
animated gradient that transitions between two customizable colors.</li>
|
||
<li><a
|
||
href="https://github.com/omnedia/ngx-shiny-text">ngx-shiny-text</a> - An
|
||
Angular library that provides a shimmering text animation effect.</li>
|
||
<li><a href="https://github.com/omnedia/ngx-ripple">ngx-ripple</a> -
|
||
This component creates an expanding ripple effect with customizable
|
||
color, border, and animation duration. Perfect for adding an interactive
|
||
and engaging effect to backgrounds or containers in your
|
||
application.</li>
|
||
<li><a
|
||
href="https://github.com/omnedia/ngx-shine-border">ngx-shine-border</a>
|
||
- An Angular library that provides a dynamic and customizable animated
|
||
border effect for Angular components.</li>
|
||
<li><a
|
||
href="https://github.com/omnedia/ngx-border-beam">ngx-border-beam</a> -
|
||
This component allows you to create a glowing, animated border that can
|
||
be customized in terms of colors, border radius, and animation
|
||
duration.</li>
|
||
<li><a
|
||
href="https://github.com/omnedia/ngx-dotpattern">ngx-dotpattern</a> - An
|
||
Angular library that provides a customizable dot pattern background
|
||
effect for your Angular components.</li>
|
||
<li><a href="https://github.com/omnedia/ngx-meteors">ngx-meteors</a> -
|
||
An Angular library that adds a mesmerizing meteor shower animation
|
||
effect to your components.</li>
|
||
<li><a
|
||
href="https://github.com/omnedia/ngx-background-beams">ngx-background-beams</a>
|
||
- An Angular component that generates dynamic animated background beams
|
||
with customizable gradients and motion paths.</li>
|
||
<li><a href="https://github.com/omnedia/ngx-aurora">ngx-aurora</a> - An
|
||
Angular library that creates a mesmerizing aurora background effect.
|
||
This component provides an animated, gradient-based light effect with
|
||
customizable inversion and two different animation styles.</li>
|
||
<li><a href="https://github.com/omnedia/ngx-particles">ngx-particles</a>
|
||
- An Angular library that provides a dynamic and interactive particle
|
||
animation effect. The particles react to mouse movements, creating a
|
||
visually engaging and customizable background for your Angular
|
||
components.</li>
|
||
<li><a href="https://github.com/omnedia/ngx-spotlight">ngx-spotlight</a>
|
||
- An Angular library that creates a spotlight effect using SVG
|
||
animations. The component highlights sections of your page when they
|
||
enter the viewport, with customizable spotlight colors and optional
|
||
animations.</li>
|
||
<li><a
|
||
href="https://github.com/omnedia/ngx-starry-sky">ngx-starry-sky</a> - An
|
||
Angular library that creates a beautiful starry sky background with
|
||
optional shooting star effects.</li>
|
||
<li><a
|
||
href="https://github.com/omnedia/ngx-connection-beam">ngx-connection-beam</a>
|
||
- An Angular component that dynamically renders animated connection
|
||
lines between two elements.</li>
|
||
<li><a href="https://github.com/inorganik/ngx-countUp">ngx-countUp</a> -
|
||
Animates a numerical value by counting to it.</li>
|
||
<li><a
|
||
href="https://github.com/BugSplat-Git/ngx-animated-counter">ngx-animated-counter</a>
|
||
- BugSplat’s library provides simple count up and count down number
|
||
animations.</li>
|
||
<li><a
|
||
href="https://github.com/damingerdai/ngx-dom-confetti">ngx-dom-confetti</a>
|
||
- Celebrate success with dom confetti on Angular projects!</li>
|
||
<li><a
|
||
href="https://github.com/victor-enogwe/ngx-dotlottie-web">ngx-dotlottie-web</a>
|
||
- Angular JavaScript library for rendering Lottie and dotLottie
|
||
animations in Node.js and web environments.</li>
|
||
<li><a
|
||
href="https://github.com/afnaanulla/AfnaanNgx-cusotm-cursor">afnaan-ngx-custom-cursor</a>
|
||
- A customizable animated cursor for Angular applications. Enhance user
|
||
experience with a stylish and interactive cursor effect.</li>
|
||
<li><a href="https://www.npmjs.com/package/@ramiz4/typing-text"><span
|
||
class="citation"
|
||
data-cites="ramiz4/typing-text">@ramiz4/typing-text</span></a> - Angular
|
||
directive for animated typing effects — smooth, customizable, and
|
||
standalone.</li>
|
||
</ul>
|
||
<h4 id="calendars">Calendars</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/mattlewis92/angular-calendar">angular-calendar</a>
|
||
- A flexible calendar component for Angular 15+ that can display events
|
||
on a month, week, or day view.</li>
|
||
<li><a
|
||
href="https://github.com/fullcalendar/fullcalendar-angular">fullcalendar-angular</a>
|
||
- The official Angular component for FullCalendar.</li>
|
||
<li><a href="https://github.com/schedule-x/schedule-x"><span
|
||
class="citation"
|
||
data-cites="schedule-x/angular">@schedule-x/angular</span></a> -
|
||
Material design event calendar.</li>
|
||
<li><a
|
||
href="https://github.com/oOps1627/angular-calendar-timeline">angular-calendar-timeline</a>
|
||
- A timeline for Angular 13+ that shows tasks or events on a timeline in
|
||
different modes: days, weeks, and months. This library is pretty small
|
||
and DOESN’T use big dependencies like JQuery or Moment.js. Library also
|
||
supports SSR.</li>
|
||
<li><a
|
||
href="https://github.com/by-pinja/ngx-resource-calendar">ngx-resource-calendar</a>
|
||
- Angular resource calendar library.</li>
|
||
<li><a
|
||
href="https://www.npmjs.com/package/@hexaflexa/timegrid-angular">timegrid-angular</a>
|
||
- Angular wrapper for the <a href="https://hexaflexa.com/">HexaFlexa</a>
|
||
Timegrid web component.</li>
|
||
<li><a
|
||
href="https://github.com/giacomo/ngx-calendar-widget">ngx-calendar-widget</a>
|
||
- A lightweight, customizable, and feature-rich calendar widget designed
|
||
to simplify event management and scheduling in your Angular
|
||
applications.</li>
|
||
<li><a
|
||
href="https://github.com/roquemacia/ngx-calendario">ngx-calendario</a> -
|
||
An Angular library for displaying customizable calendars with event
|
||
support.</li>
|
||
<li><a
|
||
href="https://www.npmjs.com/package/@daypilot/daypilot-lite-angular">daypilot-lite-angular</a>
|
||
- Angular version of JavaScript/HTML5 event calendar/scheduler
|
||
components that can display day/week/month calendar views.</li>
|
||
<li><a href="https://www.npmjs.com/package/@pyas/connect-angular"><span
|
||
class="citation"
|
||
data-cites="pyas/connect-angular">@pyas/connect-angular</span></a> - A
|
||
plugin wrapper around the <a
|
||
href="https://github.com/brutforce-tech/pyas-connect">Pyas Connect</a>
|
||
Web Component, exposing PyasConnect as a first-class Angular
|
||
component.</li>
|
||
</ul>
|
||
<h4 id="captcha">Captcha</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/verto-health/ngx-turnstile">ngx-turnstile</a> -
|
||
Cloudflare Turnstile for Angular.</li>
|
||
<li><a href="https://github.com/leNicDev/ng-hcaptcha">ng-hcaptcha</a> -
|
||
Provides an easy to use component for <a
|
||
href="https://hcaptcha.com/">hCaptcha</a>.</li>
|
||
<li><a
|
||
href="https://github.com/flowXM/angular-yandex-smart-captcha">angular-yandex-smart-captcha</a>
|
||
- This library adds the Yandex SmartCaptcha component to your Angular
|
||
application, providing an easy way to integrate CAPTCHA protection into
|
||
your forms and other user interactions.</li>
|
||
<li><a
|
||
href="https://github.com/wenlng/go-captcha-angular">go-captcha-angular</a>
|
||
- A simple, easy-to-use, interactive, and secure behavioral verification
|
||
code that implements verification modes such as text/graphic clicking,
|
||
sliding/dragging, and rotation.</li>
|
||
<li><a
|
||
href="https://github.com/LakhveerChahal/ng-recaptcha-2">ng-recaptcha-2</a>
|
||
- Angular 18 fork of <a
|
||
href="https://github.com/DethAriel/ng-recaptcha">ng-recaptcha</a>.
|
||
Alternatively, you create your own service that implements Google’s
|
||
reCAPTCHA with the help of this <a
|
||
href="https://ben-5.azurewebsites.net/2024/9/5/google-recaptcha-v3-with-angular/#google_vignette">article</a>.</li>
|
||
<li><a
|
||
href="https://github.com/mrzinkowin/ngx-slider-recaptcha">ngx-slider-recaptcha</a>
|
||
- Customizable Angular library that provides a slider-based CAPTCHA
|
||
component to help secure forms from spam and bot submissions.</li>
|
||
<li><a
|
||
href="https://github.com/khalilou88/semantic-components/tree/main/libs/re-captcha"><span
|
||
class="citation"
|
||
data-cites="semantic-components/re-captcha">@semantic-components/re-captcha</span></a>
|
||
- Angular 19+ integration of Google’s reCAPTCHA using <strong>signal
|
||
inputs</strong> and <strong>standalone components</strong>.</li>
|
||
<li><a
|
||
href="https://github.com/pangz-lab/ng-cloudflare-turnstile">ng-cloudflare-turnstile</a>
|
||
- An intuitive, lightweight and easy to integrate <a
|
||
href="https://developers.cloudflare.com/turnstile/">Cloudflare
|
||
turnstile</a> component for Angular.</li>
|
||
<li><a
|
||
href="https://www.npmjs.com/package/@trustcomponent/trustcaptcha-angular">trustcaptcha-angular</a>
|
||
- This library helps you <a
|
||
href="https://docs.trustcaptcha.com/en/frontend/integration?frontend=angular">integrate</a>
|
||
<a href="https://www.trustcaptcha.com/en">Trustcaptcha</a> into your
|
||
Angular frontend applications.</li>
|
||
<li><a href="https://github.com/altcha-org/altcha">altcha</a> - GDPR,
|
||
WCAG 2.2 AA, and EAA compliant, self-hosted CAPTCHA alternative with PoW
|
||
mechanism and advanced anti-spam filter.</li>
|
||
<li><a
|
||
href="https://github.com/ngx-rock/yandex-smart-captcha">yandex-smart-captcha</a>
|
||
- An Angular library for integrating <a
|
||
href="https://yandex.cloud/en/services/smartcaptcha">Yandex
|
||
SmartCaptcha</a> into your applications. This package provides Angular
|
||
components that wrap the Yandex SmartCaptcha JavaScript library,
|
||
supporting both standard and invisible captchas. It leverages Angular’s
|
||
reactive forms (via ControlValueAccessor and Validator) and modern
|
||
features like signals and effects (with zoneless support).</li>
|
||
</ul>
|
||
<h4 id="carousels">Carousels</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/uiuniversal/ngu-carousel">ngu-carousel</a> -
|
||
Angular Universal carousel.</li>
|
||
<li><a
|
||
href="https://github.com/angular-slider/ngx-slider">ngx-slider</a> -
|
||
Self-contained, mobile friendly slider component for Angular based on <a
|
||
href="https://github.com/angular-slider/angularjs-slider">angularjs-slider</a>.</li>
|
||
<li><a href="https://github.com/MurhafSousli/ngx-gallery"><span
|
||
class="citation"
|
||
data-cites="MurhafSousli/ngx-gallery">@MurhafSousli/ngx-gallery</span></a>
|
||
- Angular Gallery, Carousel and Lightbox.</li>
|
||
<li><a
|
||
href="https://github.com/sanjayV/ng-image-slider">ng-image-slider</a> -
|
||
Angular Image Slider with Lightbox.</li>
|
||
<li><a
|
||
href="https://github.com/leo6104/ngx-slick-carousel">ngx-slick-carousel</a>
|
||
- Angular 17+ wrapper for slick plugin.</li>
|
||
<li><a
|
||
href="https://github.com/JustCommunication-ru/ngx-splide">ngx-splide</a>
|
||
- Splide.js integration to Angular.</li>
|
||
<li><a
|
||
href="https://github.com/vitalii-andriiovskyi/ngx-owl-carousel-o">ngx-owl-carousel-o</a>
|
||
- owl-carousel for Angular >=6.</li>
|
||
<li><a
|
||
href="https://github.com/BenjaminBrandmeier/angular2-image-gallery">angular2-image-gallery</a>
|
||
- Image Gallery built with Angular 17+, node.js and GraphicsMagick.</li>
|
||
<li><a
|
||
href="https://naver.github.io/egjs-flicking/docs/quick-start">egjs-flicking</a>
|
||
- Flicking Angular Quick Start</li>
|
||
<li><a
|
||
href="https://github.com/bfwg/ngx-drag-scroll">ngx-drag-scroll</a> - A
|
||
lightweight responsive Angular carousel library.</li>
|
||
<li><a
|
||
href="https://github.com/failed-successfully/ngx-darkbox-gallery-library">ngx-darkbox-gallery-library</a>
|
||
- A highly configurable lightbox themed gallery library for Angular
|
||
applications using the Ivy engine (Angular 15+).</li>
|
||
<li><a
|
||
href="https://github.com/criar-art/slidecontent-angular">slidecontent-angular</a>
|
||
- A simple content slide developed in Angular with navigation buttons
|
||
and transition animations.</li>
|
||
<li><a
|
||
href="https://github.com/ZouYouShun/ngx-hm-carousel">ngx-hm-carousel</a>
|
||
- A light carousel for Angular 18+, supports mobile touch with <a
|
||
href="https://hammerjs.github.io/">HammerJs</a>.</li>
|
||
<li><a
|
||
href="https://github.com/Gauravdarkslayer/ngx-stories">ngx-stories</a> -
|
||
An Angular component to render Instagram like stories.</li>
|
||
<li><a
|
||
href="https://github.com/GreenFlag31/carousel-library">carousel-library</a>
|
||
- A versatile Angular library providing a feature-rich, simple, and
|
||
performant carousel component.</li>
|
||
<li><a
|
||
href="https://github.com/zolcsi/ngx-simple-gallery">ngx-simple-gallery</a>
|
||
- A lightweight gallery library for Angular 18 that presents all images
|
||
as thumbnails, expanding them to full size upon clicking or
|
||
tapping.</li>
|
||
<li><a href="https://github.com/daelmaak/ngx-gallery"><span
|
||
class="citation"
|
||
data-cites="daelmaak/ngx-gallery">@daelmaak/ngx-gallery</span></a> -
|
||
Small, performant, responsive, dependency free, easy to use Angular 8+
|
||
gallery.</li>
|
||
<li><a
|
||
href="https://github.com/donaldxdonald/embla-carousel-angular">embla-carousel-angular</a>
|
||
- Angular wrapper for <a
|
||
href="https://github.com/davidjerleke/embla-carousel">Embla
|
||
Carousel</a>.</li>
|
||
<li><a href="https://github.com/vinlos/ngx-gallery"><span
|
||
class="citation"
|
||
data-cites="vinlos/ngx-gallery">@vinlos/ngx-gallery</span></a> - A
|
||
simple native gallery component for Angular 16+.</li>
|
||
</ul>
|
||
<h4 id="charts">Charts</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/valor-software/ng2-charts">ng2-charts</a> -
|
||
Beautiful charts for Angular2 based on Chart.js.</li>
|
||
<li><a href="https://github.com/swimlane/ngx-charts">ngx-charts</a> -
|
||
Declarative Charting Framework for Angular2 and beyond!</li>
|
||
<li><a
|
||
href="https://github.com/apexcharts/ng-apexcharts">ng-apexcharts</a> -
|
||
Angular wrapper for ApexCharts to build interactive visualizations in
|
||
Angular 7+.</li>
|
||
<li><a href="https://github.com/willsoto/ng-chartist">ng-chartist</a> -
|
||
Angular component for Chartist.js.</li>
|
||
<li><a href="https://github.com/bumbeishvili/org-chart">org-chart</a> -
|
||
Highly customizable org chart. Integrations available for Angular,
|
||
React, and Vue.</li>
|
||
<li><a
|
||
href="https://github.com/ag-grid/ag-charts/tree/latest/packages/ag-charts-angular">ag-charts</a>
|
||
- Fully-featured and highly customizable JavaScript charting
|
||
library.</li>
|
||
<li><a
|
||
href="https://github.com/systelab/systelab-charts">systelab-charts</a> -
|
||
Systelab Angular Chart services.</li>
|
||
<li><a href="https://github.com/worktile/ngx-gantt">ngx-gantt</a> - A
|
||
modern and powerful gantt chart component for Angular.</li>
|
||
<li><a
|
||
href="https://github.com/carbon-design-system/carbon-charts/tree/master/packages/angular">carbon-charts</a>
|
||
- Carbon Charts Angular is a thin Angular wrapper around the vanilla
|
||
JavaScript <span class="citation"
|
||
data-cites="carbon/charts">@carbon/charts</span> component library.</li>
|
||
<li><a
|
||
href="https://github.com/Angular2Guy/ngx-simple-charts">ngx-simple-charts</a>
|
||
- 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.</li>
|
||
<li><a href="https://github.com/xieziyu/ngx-echarts">ngx-echarts</a> -
|
||
Angular directive for <a
|
||
href="https://github.com/apache/incubator-echarts">Apache
|
||
ECharts</a>.</li>
|
||
<li><a href="https://github.com/uiuniversal/ngu-flow">ngu-flow</a> -
|
||
Angular flow diagram library.</li>
|
||
<li><a
|
||
href="https://github.com/highcharts/highcharts-angular">highcharts-angular</a>
|
||
- Official minimal <a href="https://www.highcharts.com/">Highcharts</a>
|
||
integration for Angular.</li>
|
||
<li><a href="https://flow.foblex.com/">Foblex</a> - Angular Powered
|
||
Flow-Chart Library.</li>
|
||
<li><a href="https://github.com/f5/unovis">unovis</a> - Modular data
|
||
visualization framework for React, Angular, Svelte, Vue, and vanilla
|
||
TypeScript or JavaScript.</li>
|
||
<li><a
|
||
href="https://github.com/FERNman/angular-google-charts">angular-google-charts</a>
|
||
- A wrapper for the Google Charts library written in Angular.</li>
|
||
<li><a
|
||
href="https://github.com/flexmonster/ngx-flexmonster">ngx-flexmonster</a>
|
||
- A powerful and fully customizable JavaScript component for web
|
||
reporting. It is packed with all core features for data analysis and can
|
||
easily become a part of your Angular data visualization project.</li>
|
||
<li><a href="https://github.com/swimlane/ngx-graph">ngx-graph</a> -
|
||
Graph visualization library for Angular.</li>
|
||
<li><a
|
||
href="https://github.com/taiga-family/ng-draw-flow">ng-draw-flow</a> - A
|
||
library for creating interfaces based on displaying data as nodes. It
|
||
allows you to create both simple diagrams and complex editors for
|
||
building customised charts and graphs.</li>
|
||
<li><a
|
||
href="https://github.com/nocode-js/sequential-workflow-designer">sequential-workflow-designer</a>
|
||
- Customizable no-code component for building flow-based programming
|
||
applications or workflow automation. Zero external dependencies.</li>
|
||
<li><a
|
||
href="https://github.com/rushik1992/ngx-hierarchy">ngx-hierarchy</a> -
|
||
Angular Component Module for Vertical or Horizontal Hierarchy/Tree View
|
||
with flexible dynamic template design and controls.</li>
|
||
<li><a href="https://www.npmjs.com/package/@cubejs-client/ngx"><span
|
||
class="citation"
|
||
data-cites="cubejs-client/ngx">@cubejs-client/ngx</span></a> — Along
|
||
with <a href="https://www.npmjs.com/package/@cubejs-client/core"><span
|
||
class="citation"
|
||
data-cites="cubejs-client/core">@cubejs-client/core</span></a>, you can
|
||
<a
|
||
href="https://cube.dev/docs/product/apis-integrations/javascript-sdk/angular">integrate</a>
|
||
Cube.js in Angular.</li>
|
||
<li><a
|
||
href="https://github.com/jamesbrobb/ngx-lightweight-charts">ngx-lightweight-charts</a>
|
||
- An easily extendable Angular wrapper for <a
|
||
href="https://www.tradingview.com/lightweight-charts/">Trading View
|
||
Lightweight Charts</a>.</li>
|
||
<li><a href="https://github.com/amcharts/amcharts5">amcharts5</a> - The
|
||
newest, fastest, and most advanced amCharts charting library for
|
||
JavaScript and TypeScript apps. Check out the <a
|
||
href="https://www.amcharts.com/docs/v5/getting-started/integrations/angular/">Angular
|
||
integration guide</a> to get started. Additionally, older versions are
|
||
still being updated to support newer releases of Angular.</li>
|
||
</ul>
|
||
<h4 id="cookies">Cookies</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/stevermeister/ngx-cookie-service">ngx-cookie-service</a>
|
||
- Angular service for cookies. Originally based on the <a
|
||
href="https://github.com/BCJTI/ng2-cookies">ng2-cookies</a>
|
||
library.</li>
|
||
<li><a
|
||
href="https://github.com/giacomo/ngx-cookie-consent">ngx-cookie-consent</a>
|
||
- Angular multi-language module to display a cookie consent banner
|
||
without other dependencies.</li>
|
||
<li><a
|
||
href="https://github.com/tinesoft/ngx-cookieconsent">ngx-cookieconsent</a>
|
||
- Cookie Consent module for Angular.</li>
|
||
<li><a
|
||
href="https://github.com/orestbida/cookieconsent">cookieconsent</a> -
|
||
Simple cross-browser cookie-consent plugin written in vanilla js that
|
||
can be added to <a
|
||
href="https://cookieconsent.orestbida.com/essential/getting-started.html#angular">Angular</a>.</li>
|
||
<li><a
|
||
href="https://github.com/Ask-786/ngx-cookie-ssr">ngx-cookie-ssr</a> - A
|
||
straightforward cookie service for Angular 19 applications, inspired by
|
||
ngx-cookie-service.</li>
|
||
<li><a
|
||
href="https://github.com/KoblerS/ngx-gdpr-cookie-consent">ngx-gdpr-cookie-consent</a>
|
||
- A beautiful Cookie consent library, easy to use.</li>
|
||
</ul>
|
||
<h4 id="csv">CSV</h4>
|
||
<ul>
|
||
<li><a href="https://github.com/wnabil/ngx-export-as">ngx-export-as</a>
|
||
- Angular 2+ / Ionic 2+ HTML/table element to export it as JSON, XML,
|
||
PNG, CSV, TXT, MS-Word, Ms-Excel, and PDF.</li>
|
||
<li><a href="https://github.com/rars/ng2csv">ng2csv</a> - Angular
|
||
service for saving data to CSV file.</li>
|
||
<li><a
|
||
href="https://github.com/tofiqquadri/ngx-csv-parser">ngx-csv-parser</a>
|
||
- CSV Parser for Angular by Developers Hive.</li>
|
||
<li><a
|
||
href="https://github.com/malikrajat/rm-ng-export-to-csv">rm-ng-export-to-csv</a>
|
||
- A lightweight and customizable Angular library to export JSON data to
|
||
CSV files with auto-download support. Ideal for charts, tables, reports,
|
||
and dashboards.</li>
|
||
</ul>
|
||
<h4 id="data-grids">Data Grids</h4>
|
||
<ul>
|
||
<li><a href="https://www.ag-grid.com/">ag-grid</a> - The best JavaScript
|
||
Data Table for building Enterprise Applications. Supports React,
|
||
Angular, Vue and Plain JavaScript.</li>
|
||
<li><a
|
||
href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid">ignite-ui-angular’s
|
||
grid</a> - The data grid, tree grid, hierarchical grid in <a
|
||
href="https://github.com/IgniteUI/igniteui-angular">Ignite UI for
|
||
Angular</a> provide excel-style filtering, live-data, sorting, draggable
|
||
row and other toolbar.</li>
|
||
<li><a
|
||
href="https://docs.sheetjs.com/docs/demos/frontend/angular">sheetjs</a>
|
||
- SheetJS is a JavaScript library for reading and writing data from
|
||
spreadsheets.</li>
|
||
<li><a
|
||
href="https://github.com/OvidijusParsiunas/active-table">active-table</a>
|
||
- Framework agnostic table component for editable data experience.</li>
|
||
<li><a href="https://github.com/statico/jsgrids">jsgrids</a> - A
|
||
comparison tool to compare JavaScript data grid and spreadsheet
|
||
libraries. Find even more libraries from this repo.</li>
|
||
<li><a href="https://github.com/jspreadsheet/ce">jspreadsheet</a> - <a
|
||
href="https://bossanova.uk/jspreadsheet/docs/getting-started">Jspreadsheet</a>
|
||
is a lightweight vanilla javascript plugin to create amazing web-based
|
||
online interactive tables and spreadsheets compatible with other
|
||
spreadsheet software.</li>
|
||
<li><a
|
||
href="https://handsontable.com/docs/javascript-data-grid/angular-installation/">handsontable</a>
|
||
- Handsontable is a popular JavaScript data grid component that brings
|
||
the well-known look and feel of spreadsheets to your application.</li>
|
||
<li><a
|
||
href="https://github.com/ghiscoding/slickgrid-universal">slickgrid-universal</a>
|
||
- A monorepo which includes all editors, filters, extensions, and
|
||
services related to framework agnostic <a
|
||
href="https://github.com/6pac/SlickGrid">SlickGrid</a> usage.</li>
|
||
<li><a href="https://github.com/revolist/revogrid">revogrid</a> -
|
||
Powerful virtual data grid smartsheet with advanced customization. Best
|
||
features from Excel plus incredible performance.</li>
|
||
<li><a
|
||
href="https://www.zinggrid.com/docs/integrations/js-frameworks-&-libs/angular">ZingGrid</a>
|
||
- <a href="https://github.com/ZingGrid/zinggrid">ZingGrid</a> is a
|
||
JavaScript Web Component Library that allows developers to include
|
||
interactive data tables in their web applications. The library can also
|
||
be used in popular frameworks such as React, Angular, Vue, jQuery, and
|
||
many more!</li>
|
||
<li><a
|
||
href="https://github.com/panemu/ngx-panemu-table">ngx-panemu-table</a> -
|
||
An Angular table component. It is designed to be easy to use. Most work
|
||
will be in TypeScript file, while the HTML file only needs to have a
|
||
very simple <code>panemu-table</code> tag.</li>
|
||
<li><a href="https://github.com/blueshiftone/ngx-grid">ngx-grid</a> - A
|
||
professional Angular data grid.</li>
|
||
<li><a href="https://github.com/guiexperttable/angular-19-table"><span
|
||
class="citation"
|
||
data-cites="guiexpert/angular-table">@guiexpert/angular-table</span></a>
|
||
- Framework-agnostic table library designed to seamlessly integrate with
|
||
the major frameworks, including <a
|
||
href="https://gui.expert/getstarted/angular/">Angular</a>.</li>
|
||
<li><a
|
||
href="https://github.com/knackstedt/ngx-tabulator-tables">ngx-tabulator-tables</a>
|
||
- Angular wrapper for the <a
|
||
href="https://tabulator.info/">Tabulator</a> table library.</li>
|
||
<li><a
|
||
href="https://developer.mescius.com/activereportsjs/angular-reporting-tool">activereportsjs/angular-reporting-tool</a>
|
||
- A set of Angular components used for data consolidation and
|
||
visualization. <a
|
||
href="https://developer.mescius.com/activereportsjs">ActiveReportsJS</a>
|
||
is a solution used by Angular developers to embed reporting within web
|
||
applications.</li>
|
||
<li><a
|
||
href="https://github.com/Samuel-Pinheiro-C-Lopes/ngx-s-data-table">ngx-s-data-table</a>
|
||
- An Angular module for a data table that automatically maps data from a
|
||
specified class. It also allows users to provide custom mappings for
|
||
greater flexibility in rendering data.</li>
|
||
<li><a href="https://github.com/BePo65/mat-datatable">mat-datatable</a>
|
||
- A simple data table with virtual scrolling using Angular
|
||
Material.</li>
|
||
<li><a href="https://github.com/Trixwell/data-grid"><span
|
||
class="citation"
|
||
data-cites="Trixwell/data-grid">@Trixwell/data-grid</span></a> - An
|
||
Angular component that renders data in a highly customizable and
|
||
interactive data table. It supports features such as filtering, sorting,
|
||
pagination, CSV export, expandable sub-grids, and integration with
|
||
Angular Material components.</li>
|
||
<li><a
|
||
href="https://github.com/Maxl94/ngx-multi-sort-table">ngx-multi-sort-table</a>
|
||
- This library features a multiple sortable table based on Angular
|
||
Material Design, with a focus on server-side loaded and sorted
|
||
data.</li>
|
||
<li><a
|
||
href="https://github.com/dj-fiorex/angular2-smart-table">angular2-smart-table</a>
|
||
- Angular Smart Data Table component.</li>
|
||
<li><a
|
||
href="https://github.com/valentinstn/ngx-editable-material-table">ngx-editable-material-table</a>
|
||
- An editable table, built on top of Angular Material, natively for
|
||
Angular.</li>
|
||
<li><a
|
||
href="https://github.com/prashantd-17/ngx-smartgrid">ngx-smartgrid</a> -
|
||
A lightweight and flexible Angular table/grid component designed to work
|
||
seamlessly across Angular 10 to 20+.</li>
|
||
</ul>
|
||
<h4 id="dates">Dates</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/joanllenas/ngx-date-fns">ngx-date-fns</a> - <a
|
||
href="https://date-fns.org/">Date-fns</a> pipes for Angular.</li>
|
||
<li><a
|
||
href="https://github.com/tonysamperi/ngx-mat-timepicker">ngx-mat-timepicker</a>
|
||
- A true material timepicker.</li>
|
||
<li><a
|
||
href="https://github.com/BhavinPatel04/ngx-datetime-range-picker">ngx-datetime-range-picker</a>
|
||
- Angular material datetime range picker with daily, weekly, monthly,
|
||
quarterly & yearly levels.</li>
|
||
<li><a
|
||
href="https://github.com/kuhnroyal/mat-datetimepicker">mat-datetimepicker</a>
|
||
- Material datetimepicker for <code>@angular/material</code>.</li>
|
||
<li><a
|
||
href="https://github.com/vlio20/angular-datepicker">angular-datepicker</a>
|
||
- Highly configurable date picker built for Angular applications.</li>
|
||
<li><a
|
||
href="https://github.com/lekhmanrus/ngx-multiple-dates">ngx-multiple-dates</a>
|
||
- Multiple dates picker based on Angular Material.</li>
|
||
<li><a href="https://github.com/ressurectit/ng-datetime">ng-datetime</a>
|
||
- Angular library containing components used for handling datetime.</li>
|
||
<li><a
|
||
href="https://github.com/antonioconselheiro/time2blocks-ngx">time2blocks-ngx</a>
|
||
- Angular lib to identify which time is associated with a blockchain
|
||
block in the past (and format it).</li>
|
||
<li><a
|
||
href="https://github.com/dhutaryan/ngx-mat-timepicker">dhutaryan/ngx-mat-timepicker</a>
|
||
- Material timepicker based on material design.</li>
|
||
<li><a href="https://github.com/omnedia/ngx-timeline">ngx-timeline</a> -
|
||
A simple component library to add an animated timeline view.</li>
|
||
<li><a
|
||
href="https://github.com/WurshaApps/ngx-prayertimes-api">ngx-prayertimes-api</a>
|
||
- An Angular API client for <a
|
||
href="https://aladhan.com/prayer-times-api">Prayer Times API</a>.</li>
|
||
<li><a
|
||
href="https://github.com/emanuelefricano93/frxjs-Ngx-Timeline">frxjs-Ngx-Timeline</a>
|
||
- This library allows you to integrate a timeline in your Angular
|
||
app.</li>
|
||
<li><a
|
||
href="https://github.com/Abhinavgaur01/ngx-daterangepicker-pro-demo">ngx-daterangepicker-pro</a>
|
||
- A powerful, customizable Angular date range picker built with Angular
|
||
17+ and <a href="https://github.com/iamkun/dayjs">Day.js</a>.</li>
|
||
<li><a
|
||
href="https://github.com/nedpuganti/ngx-custom-daterangepicker">ngx-custom-daterangepicker</a>
|
||
- An Angular date range picker component with advanced functionality and
|
||
Material Design support. It allows for easy date range selection with
|
||
customizable options and is simple to integrate.</li>
|
||
<li><a
|
||
href="https://www.npmjs.com/package/angular-material-jalali-datepicker-adapter">angular-material-jalali-datepicker-adapter</a>
|
||
- A comprehensive Angular library that provides Jalali (Persian/Solar
|
||
Hijri/Shamsi) date adapter for Angular Material datepicker
|
||
component.</li>
|
||
<li><a
|
||
href="https://github.com/AdaskoTheBeAsT/date-interceptors">date-interceptors</a>
|
||
- This library provides a robust solution for converting date and
|
||
duration strings from JSON payloads into native Date objects and
|
||
Duration objects, respectively.</li>
|
||
<li><a
|
||
href="https://www.npmjs.com/package/@asadi/angular-date-components"><span
|
||
class="citation"
|
||
data-cites="asadi/angular-date-components">@asadi/angular-date-components</span></a>
|
||
- A comprehensive Angular library of date-related components designed to
|
||
meet the needs of applications that require localization based on
|
||
various calendar systems.</li>
|
||
</ul>
|
||
<h4 id="dom">DOM</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/fidian/ngx-resize-observer">ngx-resize-observer</a>
|
||
- Angular 8+ module for detecting when elements are resized.</li>
|
||
<li><a
|
||
href="https://github.com/fidian/ngx-mutation-observer">ngx-mutation-observer</a>
|
||
- Get Angular 8+ events fired when an element is mutated in the
|
||
DOM.</li>
|
||
<li><a
|
||
href="https://github.com/fidian/ngx-visibility">ngx-visibility</a> -
|
||
Angular module that detects when elements are visible. Uses
|
||
IntersectionObserver.</li>
|
||
<li><a
|
||
href="https://github.com/tutkli/ngx-breakpoint-observer">ngx-breakpoint-observer</a>
|
||
- This library adds reactive breakpoint and media query methods based on
|
||
Signals.</li>
|
||
<li><a href="https://github.com/omnedia/ngx-fade">ngx-fade</a> - A
|
||
versatile Angular component that provides a smooth fading and sliding
|
||
effect for its content as it enters or leaves the viewport. This
|
||
component uses the Intersection Observer API.</li>
|
||
<li><a
|
||
href="https://github.com/MTobisch/ngx-dynamic-hooks">ngx-dynamic-hooks</a>
|
||
- Automatically insert live Angular components into dynamic strings
|
||
(based on their selector or any pattern of your choice) and render the
|
||
result in the DOM.</li>
|
||
<li><a href="https://github.com/nigrosimone/ng-let">ng-let</a> -
|
||
Structural directive for sharing data as local variable into html
|
||
component template.</li>
|
||
<li><a
|
||
href="https://github.com/nigrosimone/ng-for-track-by-property">ng-for-track-by-property</a>
|
||
- Angular global trackBy property directive with strict type
|
||
checking.</li>
|
||
<li><a
|
||
href="https://github.com/nigrosimone/ng-generic-pipe">ng-generic-pipe</a>
|
||
- Generic pipe for Angular application.</li>
|
||
<li><a href="https://github.com/embarq/safe-pipe">safe-pipe</a> -
|
||
Angular pipe for sanitizing your unsafe content.</li>
|
||
<li><a
|
||
href="https://github.com/MurhafSousli/ngx-highlightjs">ngx-highlightjs</a>
|
||
- Instant code highlighting, auto-detect language, super easy to
|
||
use!</li>
|
||
<li><a
|
||
href="https://github.com/MurhafSousli/ngx-sharebuttons">ngx-sharebuttons</a>
|
||
- Angular share buttons.</li>
|
||
<li><a href="https://github.com/Jaspero/ng-helpers">ng-helpers</a> - A
|
||
collection of useful components, directives and pipes for Angular.</li>
|
||
<li><a href="https://github.com/lentschi/ngx-ellipsis">ngx-ellipsis</a>
|
||
- Multiline text with ellipsis for Angular 9+.</li>
|
||
<li><a
|
||
href="https://github.com/ko1ebayev/ngx-func-pipe">ngx-func-pipe</a> - A
|
||
simple and lightweight Angular pipe that allows you to call a function
|
||
directly from your Angular templates.</li>
|
||
<li><a
|
||
href="https://github.com/SlyTed/ngx-pipes-toolkit">ngx-pipes-toolkit</a>
|
||
- A complementary pipes library for Angular.</li>
|
||
<li><a href="https://github.com/piecioshka/ngx-nullish">ngx-nullish</a>
|
||
- Angular Structural Directive, which replaces <code>*ngIf</code> with
|
||
Nullish Coalescing operator.</li>
|
||
<li><a
|
||
href="https://github.com/yassine-klilich/ngx-interpolation">ngx-interpolation</a>
|
||
- An Angular lightweight library to interprate string interpolation
|
||
expressions.</li>
|
||
<li><a href="https://github.com/Celtian/ngx-nullable">ngx-nullable</a> -
|
||
This library provides a way to make properties nullable in Angular
|
||
templates.</li>
|
||
<li><a
|
||
href="https://github.com/Celtian/ngx-if-platform">ngx-if-platform</a> -
|
||
Directive for conditional display based on platform.</li>
|
||
<li><a href="https://github.com/Celtian/ngx-cut">ngx-cut</a> - Angular
|
||
directive for cutting texts with responsive options.</li>
|
||
<li><a
|
||
href="https://github.com/Celtian/ngx-app-version">ngx-app-version</a> -
|
||
Angular directive for writing version into DOM.</li>
|
||
<li><a href="https://github.com/Celtian/ngx-repeat">ngx-repeat</a> -
|
||
Angular directive for repeating HTML element by count.</li>
|
||
<li><a
|
||
href="https://github.com/Celtian/ngx-fixed-footer">ngx-fixed-footer</a>
|
||
- Angular directive that adds fixed footer without overlap.</li>
|
||
<li><a
|
||
href="https://github.com/taiga-family/ng-dompurify">ng-dompurify</a> -
|
||
This library implements <a
|
||
href="https://github.com/cure53/DOMPurify">DOMPurify</a> as Angular
|
||
Sanitizer or Pipe. It delegates sanitizing to DOMPurify and supports the
|
||
same configuration.</li>
|
||
<li><a
|
||
href="https://github.com/push-based/ngx-speculative-link">ngx-speculative-link</a>
|
||
- An Angular implementation of <a
|
||
href="https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API">Speculative
|
||
Rules API</a> inspired by <a
|
||
href="https://github.com/GoogleChromeLabs/quicklink">quicklink</a> and
|
||
ngx-quicklink.</li>
|
||
<li><a
|
||
href="https://github.com/wassim-k/ngx-signal-pipes">ngx-signal-pipes</a>
|
||
- Transform Angular signals with functional pipes.</li>
|
||
<li><a href="https://github.com/luisalejandrofigueredo/ng-gd">ng-gd</a>
|
||
- An easy way to manage a canvas element with support for mouse or
|
||
tablet events.</li>
|
||
<li><a
|
||
href="https://github.com/philenius/ngx-annotate-text">ngx-annotate-text</a>
|
||
- This Angular component library is perfect for tasks like visualizing
|
||
named entity recognition, part of speech tagging, or annotating text
|
||
datasets. It allows for interactively highlighting and annotating parts
|
||
of text.</li>
|
||
<li><a
|
||
href="https://github.com/bodnya29179/ngx-responsive-if">ngx-responsive-if</a>
|
||
- An Angular structural directive for conditional rendering based on
|
||
media queries.</li>
|
||
<li><a
|
||
href="https://github.com/andreasnicolaou/ngx-copy-to-clipboard">ngx-copy-to-clipboard</a>
|
||
- an Angular directive that enables easy text copying to the clipboard
|
||
with a single click. It supports customizable success/error messages and
|
||
triggers events on copy actions.</li>
|
||
<li><a
|
||
href="https://github.com/Kr0san89/ng-click-outside">ng-click-outside</a>
|
||
- Angular directive for handling click events outside of an
|
||
element.</li>
|
||
<li><a
|
||
href="https://github.com/paulotokarskiglinski/ngx-search-pipe">ngx-search-pipe</a>
|
||
- A search pipe for Angular that filters a collection of objects based
|
||
on a specified search term, designed to work seamlessly with
|
||
signals.</li>
|
||
<li><a href="https://github.com/eurusik/ngx-autofocus">ngx-autofocus</a>
|
||
- A powerful, flexible Angular directive for automatic element
|
||
focusing.</li>
|
||
<li><a
|
||
href="https://github.com/gund/ng-dynamic-component">ng-dynamic-component</a>
|
||
- Dynamic components with full life-cycle support for inputs and outputs
|
||
for Angular.</li>
|
||
<li><a
|
||
href="https://github.com/mofirojean/ngx-pipe-lib">ngx-pipe-lib</a> -
|
||
Common angular pipe examples for your day to day tasks.</li>
|
||
<li><a href="https://github.com/amirhsnf/pyno-date">pyno-date</a> - A
|
||
lightweight Angular library for converting and formatting Jalali and
|
||
Gregorian dates.</li>
|
||
<li><a href="https://github.com/7kasper/ngx-fittext">ngx-fittext</a> -
|
||
An Angular library that allows you fit text in a box or a line.</li>
|
||
<li><a
|
||
href="https://github.com/Bilal-Abubakari/ngx-optimus">ngx-optimus</a> -
|
||
An Angular library dedicated to providing a collection of useful custom
|
||
pipes to transform data in your templates. This library aims to simplify
|
||
common data formatting tasks and keep your component logic cleaner.</li>
|
||
<li><a
|
||
href="https://www.npmjs.com/package/ngx-number-to-words">ngx-number-to-words</a>
|
||
- An Angular library that provides a simple and effective pipe to
|
||
convert numbers into their respective word representations. This is
|
||
particularly useful for applications that need to display numbers in
|
||
words, such as invoices, reports, or financial applications.</li>
|
||
<li><a href="https://github.com/ngx-rock/memoize-pipe">memoize-pipe</a>
|
||
- A universal pipe for memoizing computations in Angular templates.</li>
|
||
</ul>
|
||
<h4 id="drag-and-drop">Drag and Drop</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/reppners/ngx-drag-drop">ngx-drag-drop</a> -
|
||
Angular directives using the native HTML Drag And Drop API.</li>
|
||
<li><a href="https://github.com/hackingharold/ngx-dropzone"><span
|
||
class="citation"
|
||
data-cites="hackingharold/ngx-dropzone">@hackingharold/ngx-dropzone</span></a>
|
||
- The missing file input component for Angular Material.</li>
|
||
<li><a href="https://github.com/ng-dnd/ng-dnd">ng-dnd</a> - Drag and
|
||
Drop for Angular.</li>
|
||
<li><a
|
||
href="https://github.com/telebroad/ngx-file-drag-drop">ngx-file-drag-drop</a>
|
||
- Angular material file input component which lets the user drag and
|
||
drop files, or select files with the native file picker.</li>
|
||
<li><a href="https://material.angular.io/cdk/drag-drop/overview">angular
|
||
cdk</a> - The <code>@angular/cdk/drag-drop</code> module provides you
|
||
with a way to easily and declaratively create drag-and-drop
|
||
interfaces.</li>
|
||
<li><a
|
||
href="https://github.com/skutam/angular-drag-drop-layout">angular-drag-drop-layout</a>
|
||
- A lightweight, dependency-free Angular library for creating highly
|
||
customizable, responsive grid layouts with drag-and-drop
|
||
functionality.</li>
|
||
<li><a href="https://github.com/omnedia/ngx-swapy">ngx-swapy</a> - A
|
||
simple component library to get a drag and drop DOM through the help of
|
||
<a href="https://github.com/TahaSh/swapy">Swapy</a>.</li>
|
||
<li><a
|
||
href="https://github.com/bmartinson/ngx-draggable-dom">ngx-draggable-dom</a>
|
||
- Angular attribute directive that causes any element to become a
|
||
draggable element.</li>
|
||
<li><a
|
||
href="https://github.com/dmytro-parfenov/ngx-drag-resize">ngx-drag-resize</a>
|
||
- This Angular library provides directives that add drag and resize
|
||
functionality to HTML elements.</li>
|
||
<li><a
|
||
href="https://github.com/johnhwhite/ng-keyboard-sort">ng-keyboard-sort</a>
|
||
- Library to add keyboard commands for elements that also use CDK drag
|
||
and drop sorting.</li>
|
||
<li><a
|
||
href="https://github.com/KAMAELUA/ngx-draggable-widget-kama">ngx-draggable-widget-kama</a>
|
||
- Reworked <a
|
||
href="https://github.com/arup-banerjee/ngx-draggable-widget">ngx-draggable-widget</a>
|
||
for better support.</li>
|
||
<li><a
|
||
href="https://github.com/rosejoe47/angular-mixed-cdk-drag-drop">angular-mixed-cdk-drag-drop</a>
|
||
- Angular Directive to support mixed orientation drag drop using Angular
|
||
CDK.</li>
|
||
<li><a
|
||
href="https://github.com/shhdharmen/cdk-drag-snap-to-point">cdk-drag-snap-to-point</a>
|
||
- A demo to showcase cdkDrag features to achieve drop only on certain
|
||
points.</li>
|
||
<li><a href="https://github.com/MasterATM/ngx-dropzone"><span
|
||
class="citation"
|
||
data-cites="MasterATM/ngx-dropzone">@MasterATM/ngx-dropzone</span></a> -
|
||
A lightweight and highly customizable Angular dropzone component for
|
||
file uploads. Based on <a
|
||
href="https://github.com/peterfreeman/ngx-dropzone"><span
|
||
class="citation"
|
||
data-cites="peterfreeman/ngx-dropzone">@peterfreeman/ngx-dropzone</span></a>
|
||
repository.</li>
|
||
</ul>
|
||
<h4 id="editor-components">Editor Components</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/acrodata/code-editor">acrodata/code-editor</a>
|
||
- CodeMirror 6 wrapper for Angular.</li>
|
||
<li><a
|
||
href="https://github.com/froala/angular-froala-wysiwyg">angular2-froala-wysiwyg</a>
|
||
- Angular 2 wrapper for Froala WYSIWYG HTML Editor.</li>
|
||
<li><a
|
||
href="https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/frameworks/angular.html">ckeditor</a>
|
||
- Ckeditor plugin for Angular2+.</li>
|
||
<li><a
|
||
href="https://github.com/Raiper34/ngx-simple-text-editor">ngx-simple-text-editor</a>
|
||
- Ngx Simple Text editor or ST editor is a simple native text editor
|
||
component for Angular 9+.</li>
|
||
<li><a
|
||
href="https://github.com/KillerCodeMonkey/ngx-quill">ngx-quill</a> -
|
||
Angular (>=2) components for the Quill Rich Text Editor.</li>
|
||
<li><a href="https://github.com/sibiraj-s/ngx-editor">ngx-editor</a> -
|
||
Rich Text Editor for Angular using ProseMirror.</li>
|
||
<li><a href="https://github.com/ngstack/code-editor">code-editor</a> -
|
||
Code editor component for Angular applications.</li>
|
||
<li><a href="https://github.com/stevermeister/ngx-wig">ngx-wig</a> -
|
||
Angular(also Angular 17) WYSIWYG HTML Rich Text Editor.</li>
|
||
<li><a
|
||
href="https://github.com/jean-merelis/ngx-monaco-editor">ngx-monaco-editor</a>
|
||
- Monaco Code Editor for Angular.</li>
|
||
<li><a
|
||
href="https://github.com/heinerwalter/ngx-property-editor">ngx-property-editor</a>
|
||
- Angular library containing simple input components and a property
|
||
editor component, which automatically builds a form for editing all
|
||
properties of any object.</li>
|
||
<li><a href="https://github.com/sibiraj-s/ngx-tiptap">ngx-tiptap</a> -
|
||
Angular bindings for <a href="https://tiptap.dev/">tiptap v2</a>.</li>
|
||
<li><a
|
||
href="https://github.com/tinymce/tinymce-angular">tinymce-angular</a> -
|
||
Official <a href="https://www.tiny.cloud/">TinyMCE</a> Angular
|
||
Component.</li>
|
||
<li><a
|
||
href="https://github.com/worktile/slate-angular">slate-angular</a> -
|
||
Angular view layer for <a
|
||
href="https://github.com/ianstormtaylor/slate">Slate</a>.</li>
|
||
<li><a
|
||
href="https://github.com/dytab/BlockNoteAngular">BlockNoteAngular</a> -
|
||
Unofficial <a
|
||
href="https://github.com/TypeCellOS/BlockNote">BlockNote</a> Angular
|
||
wrapper.</li>
|
||
<li><a href="https://github.com/julianpoemp/ngx-jodit/">ngx-jodit</a> -
|
||
Angular wrapper for <a href="https://github.com/xdan/jodit">Jodit</a>
|
||
WYSIWYG editor.</li>
|
||
<li><a
|
||
href="https://github.com/zefoy/ngx-ace-wrapper">ngx-ace-wrapper</a> -
|
||
Angular wrapper library for <a href="http://ace.c9.io/">Ace</a>.</li>
|
||
<li><a
|
||
href="https://github.com/zefoy/ngx-quill-wrapper">ngx-quill-wrapper</a>
|
||
- Angular wrapper library for <a
|
||
href="http://quilljs.com/">Quill</a>.</li>
|
||
<li><a href="https://github.com/cipchk/ngx-tinymce">ngx-tinymce</a> - <a
|
||
href="https://www.tiny.cloud/">Tinymce</a> components built with
|
||
Angular.</li>
|
||
<li><a href="https://github.com/sesan07/formly-editor">formly-editor</a>
|
||
- A configurable editor for <a
|
||
href="https://github.com/ngx-formly/ngx-formly">ngx-formly</a>
|
||
forms.</li>
|
||
<li><a
|
||
href="https://github.com/scherenhaenden/MagnetarQuill">MagnetarQuill</a>
|
||
- A versatile, extensible, and powerful WYSIWYG editor built with
|
||
Angular, designed to streamline content creation with rich text, media,
|
||
tables, and more. MagnetarQuill stands out with its plugin architecture,
|
||
cross-browser support, and stunning theming options.</li>
|
||
<li><a href="https://github.com/Ba5ik7/ngx-editorjs2">ngx-editorjs2</a>
|
||
- A highly extensible block-style editor inspired by <a
|
||
href="https://editorjs.io/">Editor.js</a>. It allows users to create and
|
||
manage rich text content using a variety of customizable blocks while
|
||
leveraging Angular’s reactive capabilities. <a
|
||
href="https://github.com/Ba5ik7/ngx-editor-js2-blocks">https://github.com/Ba5ik7/ngx-editor-js2-blocks</a>
|
||
contain custom blocks that extend the editor with additional content
|
||
types.</li>
|
||
<li><a
|
||
href="https://github.com/mouhamadalmounayar/ngx-traak">ngx-traak</a> - A
|
||
WYSIWYG angular editor library built on top of prosemirror, built for
|
||
standalone components and highly customizable with plugins.</li>
|
||
<li><a href="https://github.com/lula/ngx-summernote">ngx-summernote</a>
|
||
- <a href="https://github.com/summernote/summernote">Summernote</a>
|
||
editor for Angular.</li>
|
||
<li><a
|
||
href="https://github.com/manishpatidar028/angular-rich-text-editor">angular-rich-text-editor</a>
|
||
- Angular wrapper for <a
|
||
href="https://richtexteditor.com/">RichTextEditor</a> with license key
|
||
support and <code>ControlValueAccessor</code>.</li>
|
||
<li><a
|
||
href="https://www.npmjs.com/package/quill-table-better-dooooit">quill-table-better-dooooit</a>
|
||
- A module that enhances the table functionality of <a
|
||
href="https://quilljs.com/">Quill</a>.</li>
|
||
<li><a
|
||
href="https://github.com/michalgrzegorczyk-dev/ngx-wysicat">ngx-wysicat</a>
|
||
- Build beautiful, structured documents with ease.
|
||
<code>ngx-wysicat</code> combines block-based editing, advanced
|
||
formatting, and a flexible plugin system—all powered by <a
|
||
href="https://quilljs.com/">Quill.js</a>. Perfect for collaborative
|
||
apps, note-taking tools, or any project where content quality
|
||
matters.</li>
|
||
</ul>
|
||
<h4 id="file-upload">File Upload</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/valor-software/ng2-file-upload">ng2-file-upload</a>
|
||
- Easy to use file upload directives.</li>
|
||
<li><a href="https://github.com/flowjs/ngx-flow">ngx-flow</a> -
|
||
Angular7+ wrapper for <a
|
||
href="https://github.com/flowjs/flow.js">flow.js</a> for file
|
||
upload.</li>
|
||
<li><a href="https://github.com/kukhariev/ngx-uploadx">ngx-uploadx</a> -
|
||
Angular Resumable Upload Module.</li>
|
||
<li><a href="https://github.com/pIvan/file-upload">file-upload</a> -
|
||
Angular module used for file upload.</li>
|
||
<li><a
|
||
href="https://github.com/georgipeltekov/ngx-file-drop">ngx-file-drop</a>
|
||
- Angular module for simple desktop file and folder drag and drop. This
|
||
library does not need rxjs-compat.</li>
|
||
<li><a href="https://uppy.io/docs/angular/">uppy</a> - <a
|
||
href="https://github.com/transloadit/uppy">Uppy</a> is a sleek, modular
|
||
JavaScript file uploader that integrates seamlessly with any
|
||
application. It’s fast, has a comprehensible API and lets you worry
|
||
about more important problems than building a file uploader.</li>
|
||
<li><a
|
||
href="https://github.com/daemons88/ngx-custom-material-file-input">ngx-custom-material-file-input</a>
|
||
- File input management for Angular Material.</li>
|
||
<li><a
|
||
href="https://github.com/ZouYouShun/ngxf-uploader">ngxf-uploader</a> -
|
||
File uploader for Angular 18+.</li>
|
||
<li><a
|
||
href="https://github.com/zefoy/ngx-dropzone-wrapper">ngx-dropzone-wrapper</a>
|
||
- Angular wrapper library for <a
|
||
href="https://www.dropzone.dev/">Dropzone</a>.</li>
|
||
<li><a
|
||
href="https://github.com/wh131462/ngx-file-preview">ngx-file-preview</a>
|
||
- A powerful preview tool for many file types.</li>
|
||
<li><a
|
||
href="https://github.com/osmanabdelsalam/ngx-image-upload">ngx-image-upload</a>
|
||
- A lightweight, customizable library for image uploads with preview,
|
||
validation, and smooth animations. Supports Reactive Forms and
|
||
<code>ngTemplate</code> for full flexibility.</li>
|
||
<li><a
|
||
href="https://github.com/filestack/filestack-angular">filestack-angular</a>
|
||
- Integrate <a href="https://www.filestack.com/">Filestack</a> into your
|
||
Angular app for a faster, safer, and more reliable file upload
|
||
experience.</li>
|
||
<li><a
|
||
href="https://github.com/IsaiasCardenasM/ngx-uploader-file">ngx-uploader-file</a>
|
||
- A versatile Angular library for file uploads, offering features like
|
||
file upload and preview (including image previews with a lightbox),
|
||
validation, an image cropper, drag-and-drop functionality, and
|
||
multi-language support.</li>
|
||
<li><a
|
||
href="https://www.npmjs.com/package/ngx-filesize-pipe">ngx-filesize-pipe</a>
|
||
- An Angular pipe that converts a file size (in bytes) into a
|
||
human-readable format. Perfect for file uploaders, media managers, or
|
||
storage apps.</li>
|
||
<li><a
|
||
href="https://www.npmjs.com/package/ngx-file-helpers">ngx-file-helpers</a>
|
||
- Angular file helpers including a file picker and dropzone.</li>
|
||
</ul>
|
||
<h4 id="forms">Forms</h4>
|
||
<h5 id="general">General</h5>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/uNmAnNeR/imaskjs/tree/master/packages/angular-imask">angular-imask</a>
|
||
- Angular input mask.</li>
|
||
<li><a href="https://github.com/JsDaddy/ngx-mask">ngx-mask</a> - Angular
|
||
Plugin to make masks on form fields and html elements.</li>
|
||
<li><a href="https://github.com/taiga-family/maskito">maskito</a> -
|
||
Collection of libraries to create an input mask which ensures that user
|
||
types value according to predefined format.</li>
|
||
<li><a
|
||
href="https://github.com/timdeschryver/ng-signal-forms">ng-signal-forms</a>
|
||
- Signal powered Angular Forms.</li>
|
||
<li><a href="https://github.com/cloudnc/ngx-sub-form">ngx-sub-form</a> -
|
||
Utility library for breaking down an Angular form into multiple
|
||
components.</li>
|
||
<li><a href="https://github.com/nbfontana/ngx-currency">ngx-currency</a>
|
||
- Currency mask module for Angular.</li>
|
||
<li><a
|
||
href="https://github.com/naologic/ngx-super-forms">ngx-super-forms</a> -
|
||
This library adds some much-needed features on top of Angular forms and
|
||
Reactive forms, to make it more developer friendly.</li>
|
||
<li><a href="https://gitlab.com/tripetto">tripetto</a> - Tripetto’s
|
||
FormBuilder SDK contains fully customizable components for equipping
|
||
apps and websites with a comprehensive form building and deploying
|
||
solution. Follow this <a
|
||
href="https://tripetto.com/sdk/docs/getting-started/usage-with-angular/">quickstart</a>
|
||
to use FormBuilder with Angular.</li>
|
||
<li><a href="https://github.com/paddls/ngx-form"><span class="citation"
|
||
data-cites="paddls/ngx-form">@paddls/ngx-form</span></a> - Model based
|
||
typed reactive forms made easy.</li>
|
||
<li><a
|
||
href="https://github.com/klippa-app/ngx-enhancy-forms">ngx-enhancy-forms</a>
|
||
- Fancy enhanced Angular forms.</li>
|
||
<li><a
|
||
href="https://github.com/Juulsgaard/ngx-forms-core">ngx-forms-core</a> -
|
||
This library provides strictly typed versions of the Angular form
|
||
system. The classes extend the Angular form system and provide several
|
||
tools to improve type strictness.</li>
|
||
<li><a
|
||
href="https://github.com/klee-contrib/ngx-focus-entities">ngx-focus-entities</a>
|
||
- Library for generating reactive Angular forms from a Focus4
|
||
representation generated with <a
|
||
href="https://github.com/klee-contrib/topmodel">TopModel</a>.</li>
|
||
<li><a href="https://github.com/TanStack/form"><span class="citation"
|
||
data-cites="TanStack/form">@TanStack/form</span></a> - Designed with
|
||
first-class TypeScript support, headless UI components, and a
|
||
framework-agnostic design, it streamlines form handling and ensures a
|
||
seamless experience across various front-end frameworks.</li>
|
||
<li><a
|
||
href="https://github.com/luistabotelho/angular-signal-forms"><span
|
||
class="citation"
|
||
data-cites="luistabotelho/angular-signal-forms">@luistabotelho/angular-signal-forms</span></a>
|
||
- Simple Angular library to implement forms with signals.</li>
|
||
<li><a
|
||
href="https://github.com/infinum/ngx-form-object">ngx-form-object</a> -
|
||
ngx-form-object is an abstraction on top of Angular’s reactive forms. It
|
||
generates a form from a given model and automatically handles creation
|
||
of nested forms (HasOne and HasMany model relationships).</li>
|
||
<li><a
|
||
href="https://gitlab.com/Riuen/reactive-form-extensions">reactive-form-extensions</a>
|
||
- This project improves Angular’s ReactiveForms with useful features
|
||
like trimming inputs, showing error messages, and changing CSS classes
|
||
based on validation rules, all without extra dependencies and with less
|
||
code.</li>
|
||
<li><a href="https://github.com/ProAngular/pro-form">pro-form</a> - A
|
||
predefined set of reactive and reusable form input components based on
|
||
Angular Material.</li>
|
||
<li><a href="https://github.com/nncl/ngx-forms">ngx-forms</a> -
|
||
Collection of Angular form functions, that will help you build your
|
||
applications.</li>
|
||
<li><a href="https://github.com/klubinskak/ngx-smart-forms"><span
|
||
class="citation"
|
||
data-cites="klubinskak/ngx-smart-forms">@klubinskak/ngx-smart-forms</span></a>
|
||
- Smart, Signal-powered form state utilities for Angular 17+.</li>
|
||
<li><a href="https://github.com/pixelbyaj/ngx-form"><span
|
||
class="citation"
|
||
data-cites="pixelbyaj/ngx-form">@pixelbyaj/ngx-form</span></a> -
|
||
ISO20022 Angular Forms utilizing XSD and XML to facilitate the design of
|
||
ISO20022 XSD in HTML forms. Additionally, these forms aid in structuring
|
||
MX messages for HTML representation.</li>
|
||
<li><a
|
||
href="https://github.com/kapilkumar0037/ngx-custom-controls">ngx-custom-controls</a>
|
||
- Angular library, which provides a powerful base directive
|
||
(<code>BaseCvaImplementationDirective<T></code>) that implements
|
||
both <code>ControlValueAccessor</code> and <code>Validator</code>
|
||
interfaces, making it easy to create custom form controls with built-in
|
||
validation support for template-driven and reactive forms.</li>
|
||
<li><a href="https://github.com/Zarlex/ngxAccessor">ngxAccessor</a> -
|
||
This library introduces an innovative method for interacting with
|
||
Angular forms and signals. While Angular 19 supports Template Driven
|
||
Forms and Reactive Forms, this library offers a third approach,
|
||
seamlessly integrating signals while remaining adaptable to other state
|
||
management solutions.</li>
|
||
<li><a
|
||
href="https://github.com/chocosd/angular-template-signal-forms">angular-template-signal-forms</a>
|
||
- A modern Angular form library built from the ground up with Signals —
|
||
flexible, type-safe, and fully themeable.</li>
|
||
</ul>
|
||
<h5 id="form-controls">Form Controls</h5>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/arturovt/ngx-emoji-mart-next">ngx-emoji-mart-next</a>
|
||
- Customizable Slack-like emoji picker.</li>
|
||
<li><a href="https://github.com/scttcper/ngx-color">ngx-color</a> - 🎨
|
||
Color Pickers from Sketch, Photoshop, Chrome, Github, X & more.</li>
|
||
<li><a
|
||
href="https://github.com/zefoy/ngx-color-picker">ngx-color-picker</a> -
|
||
Color picker widget.</li>
|
||
<li><a
|
||
href="https://github.com/ngx-eco/angular-colorful">angular-colorful</a>
|
||
- A tiny color picker component for modern Angular apps.</li>
|
||
<li><a href="https://github.com/ng-select/ng-select">ng-select</a> - All
|
||
in One UI Select, Multiselect and Autocomplete.</li>
|
||
<li><a
|
||
href="https://github.com/jwelker110/file-input-accessor">file-input-accessor</a>
|
||
- Angular directive that provides file input functionality in Angular
|
||
forms.</li>
|
||
<li><a href="https://github.com/cipchk/ngx-filesaver">ngx-filesaver</a>
|
||
- Simple file save with <a
|
||
href="https://github.com/eligrey/FileSaver.js">FileSaver.js</a>.</li>
|
||
<li><a
|
||
href="https://github.com/MurhafSousli/ngx-bar-rating">ngx-bar-rating</a>
|
||
- Angular Bar Rating.</li>
|
||
<li><a
|
||
href="https://github.com/AlexMiniApps/angular-code-input">angular-code-input</a>
|
||
- Robust and tested code (number/chars) input component for Angular 7 -
|
||
16+ projects. Ionic 4 - 7+ is supported, can be used in iOS and Android.
|
||
Clipboard events are supported.</li>
|
||
<li><a
|
||
href="https://github.com/fundsaccess/angular-iban">angular-iban</a> -
|
||
IBAN directives and pipes for Angular.</li>
|
||
<li><a
|
||
href="https://github.com/joshuawwright/ngx-autosize-input">ngx-autosize-input</a>
|
||
- An Angular directive that automatically adjusts the width of an input
|
||
element. It shrinks and increases the width.</li>
|
||
<li><a
|
||
href="https://github.com/timofei-iatsenko/angular-cc-library">angular-cc-library</a>
|
||
- Library to support Credit Card input masking and validation.</li>
|
||
<li><a
|
||
href="https://github.com/webcat12345/ngx-ui-switch">ngx-ui-switch</a> -
|
||
A simple iOS 7 style switch component for Angular.</li>
|
||
<li><a href="https://github.com/ng2-ui/auto-complete">auto-complete</a>
|
||
- Angular Auto Complete component and directive.</li>
|
||
<li><a href="https://github.com/pkovzz/ngx-otp-input">ngx-otp-input</a>
|
||
- One time password input library for Angular.</li>
|
||
<li><a
|
||
href="https://github.com/osahner/ngx-show-hide-password">ngx-show-hide-password</a>
|
||
- Add split input button to password or text input. Toggles input type
|
||
between “text” and “password”.</li>
|
||
<li><a
|
||
href="https://github.com/alex-mirankov/ngx-phone-field">ngx-phone-field</a>
|
||
- An Angular directive that provides international phone input with
|
||
country flag dropdowns. It integrates with Angular forms, supporting
|
||
both Reactive Forms and Template-Driven Forms.</li>
|
||
<li><a
|
||
href="https://github.com/Avotraina/ngx-rabe-star">ngx-rabe-star</a> - An
|
||
Angular library that provides a customizable star rating component for
|
||
your Angular application.</li>
|
||
<li><a
|
||
href="https://github.com/rbalet/ngx-mat-birthday-input">ngx-mat-birthday-input</a>
|
||
- An Angular Material library for entering a birthday.</li>
|
||
<li><a
|
||
href="https://github.com/kapilkumar0037/ngx-countries-dropdown">ngx-countries-dropdown</a>
|
||
- Angular library with customizable countries dropdown component with
|
||
flags, dial code, language and currency details.</li>
|
||
<li><a
|
||
href="https://github.com/feature23/ngx-mat-split-button">ngx-mat-split-button</a>
|
||
- A split button component for Angular Material. Split buttons (also
|
||
known as “split button dropdowns” in Bootstrap) have a primary action
|
||
button with a conjoined dropdown toggle that opens a menu for secondary
|
||
actions.</li>
|
||
<li><a href="https://github.com/Harvest-Dev/ng-select2">ng-select2</a> -
|
||
This Angular CLI module is a fork of <a
|
||
href="https://github.com/plantain-00/select2-component">select2-component</a>.</li>
|
||
<li><a
|
||
href="https://github.com/FrancescoBorzi/ngx-duration-picker">ngx-duration-picker</a>
|
||
- Angular component for ISO_8601 durations.</li>
|
||
<li><a
|
||
href="https://github.com/HesamKashefi/ngx-super-select-tree">ngx-super-select-tree</a>
|
||
- A single/multiple choice drop down tree for Angular!</li>
|
||
<li><a
|
||
href="https://github.com/PsySanchez/ngx-easy-emoji-picker">ngx-easy-emoji-picker</a>
|
||
- Angular library that seamlessly integrates emoji selection into your
|
||
application.</li>
|
||
<li><a
|
||
href="https://github.com/pgerke/ngx-mat-table-multi-sort">ngx-mat-table-multi-sort</a>
|
||
- Add multi-sort capability to an Angular Material table.</li>
|
||
<li><a
|
||
href="https://github.com/Vizer/ngx-virtual-select-field">ngx-virtual-select-field</a>
|
||
- This package replicates the Angular Material Select component with
|
||
virtual scroll capabilities with help of cdk-virtual-scroll.</li>
|
||
<li><a
|
||
href="https://github.com/wlucha/ng-country-select">ng-country-select</a>
|
||
- A smart, multilingual country search with flags and codes.</li>
|
||
<li><a
|
||
href="https://github.com/filip194/ngx-card-wrapper">ngx-card-wrapper</a>
|
||
- Angular >=16 wrapper for <a
|
||
href="https://github.com/jessepollak/card">card.js</a>, which provides a
|
||
credit card form.</li>
|
||
<li><a href="https://github.com/swimlane/ngx-cron">ngx-cron</a> -
|
||
User-friendly cron input…</li>
|
||
<li><a href="https://www.npmjs.com/package/@amirsavand/ngx-input"><span
|
||
class="citation"
|
||
data-cites="amirsavand/ngx-input">@amirsavand/ngx-input</span></a> -
|
||
Awesome all-in-one Angular package for inputs and forms handling.</li>
|
||
<li><a href="https://github.com/noelitocalma/ngx-pwd">ngx-pwd</a> -
|
||
Password Strength Meter and Generator.</li>
|
||
<li><a
|
||
href="https://github.com/code-farmz/ng-otp-input">ng-otp-input</a> - A
|
||
fully customizable, one-time password (OTP) input component for the web
|
||
built with Angular.</li>
|
||
<li><a
|
||
href="https://www.npmjs.com/package/ngx-np-datepicker">ngx-np-datepicker</a>
|
||
- An Angular datepicker component that supports the Nepali calendar
|
||
(Bikram Sambat). It allows users to pick Nepali dates easily, supports
|
||
form integrations, and is ideal for applications needing a native Nepali
|
||
date experience.</li>
|
||
<li><a
|
||
href="https://github.com/noredinebahri/ngx-multi-select-input">ngx-multi-select-input</a>
|
||
- A modern, customizable Angular standalone component for multi-term
|
||
input with chips, autocomplete dropdown, and beautiful color support.
|
||
Perfect for tag editors, search bars, and more!</li>
|
||
<li><a
|
||
href="https://github.com/malikrajat/rm-ng-star-rating">rm-ng-star-rating</a>
|
||
- A fully customizable and feature-rich Angular standalone component for
|
||
advanced star ratings with precision and responsive design.</li>
|
||
<li><a
|
||
href="https://github.com/eladbh-stanley/ngx-animated-paginator">ngx-animated-paginator</a>
|
||
- Angular wrapper for <a
|
||
href="https://www.npmjs.com/package/animated-paginator-web-component">animated-paginator-web-component</a>
|
||
that plugs seamlessly into template-driven and reactive forms via
|
||
<code>ControlValueAccessor</code>.</li>
|
||
</ul>
|
||
<h5 id="json-forms">JSON Forms</h5>
|
||
<ul>
|
||
<li><a href="https://github.com/ngx-formly/ngx-formly">ngx-formly</a> -
|
||
JSON powered / Dynamic forms for Angular.</li>
|
||
<li><a href="https://github.com/formio/angular">formio</a> - JSON
|
||
powered forms for Angular.</li>
|
||
<li><a href="https://github.com/fluent-form/fluent-form">fluent-form</a>
|
||
- Building dynamic form in Angular with Fluent API or JSON.</li>
|
||
<li><a href="https://github.com/eclipsesource/jsonforms">jsonforms</a> -
|
||
Customizable JSON Schema-based forms with React, Angular and Vue support
|
||
out of the box.</li>
|
||
<li><a
|
||
href="https://github.com/eclipsesource/jsonforms-angular-seed">jsonforms-angular-seed</a>
|
||
- Angular-based JSON Forms seed app.</li>
|
||
<li><a href="https://github.com/zahmo/ng-formworks">ng-formworks</a> -
|
||
An Angular <a href="https://json-schema.org/">JSON Schema</a> Form
|
||
builder, similar to, and mostly API compatible with, <a
|
||
href="http://schemaform.io/examples/bootstrap-example.html">Angular
|
||
Schema Form</a>, <a
|
||
href="https://rjsf-team.github.io/react-jsonschema-form/">React JSON
|
||
Schema Form</a>, and <a
|
||
href="https://ulion.github.io/jsonform/playground/">JSON Form</a>.</li>
|
||
<li><a
|
||
href="https://github.com/Brrake/DynamicAngularForm">DynamicAngularForm</a>
|
||
- Create dynamic form by passing a JSON with associated values.</li>
|
||
<li><a
|
||
href="https://github.com/dynamic-forms/dynamic-forms">dynamic-forms</a>
|
||
- Angular project for dynamic forms based on JSON.</li>
|
||
<li><a
|
||
href="https://github.com/wojtek1150/json-forms-zorro-wrapper">json-forms-zorro-wrapper</a>
|
||
- Ng Zorro wrapper for json forms library.</li>
|
||
<li><a
|
||
href="https://github.com/TheNordicOne/ngx-formwork">ngx-formwork</a> -
|
||
This package provides a framework for creating Angular Reactive Forms,
|
||
based on a configuration. This configuration can come from a server in
|
||
the form of JSON or directly from an object written in TypeScript.</li>
|
||
</ul>
|
||
<h5 id="validation">Validation</h5>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/Ninja-Squad/ngx-valdemort">ngx-valdemort</a> -
|
||
Simpler, cleaner Angular validation error messages.</li>
|
||
<li><a href="https://github.com/validointi/validointi">validointi</a> -
|
||
This is a library to help you validate your template driven forms.</li>
|
||
<li><a
|
||
href="https://github.com/pjlamb12/ngx-reactive-forms-utils">ngx-reactive-forms-utils</a>
|
||
- Provides easy validation error display and custom validators.</li>
|
||
<li><a
|
||
href="https://github.com/davidwalschots/angular-reactive-validation">angular-reactive-validation</a>
|
||
- Reactive Forms validation shouldn’t require the developer to write
|
||
lots of HTML to show validation messages. This library makes it
|
||
easy.</li>
|
||
<li><a
|
||
href="https://github.com/dgonzalez870/ngx-formcontrol-errors">ngx-formcontrol-errors</a>
|
||
- A directive for showing errors in Angular form controls.</li>
|
||
<li><a
|
||
href="https://github.com/dynimorius/ngx-validator-pack">ngx-validator-pack</a>
|
||
- A collection of validators designed to simplify usage and allow quick
|
||
customization.</li>
|
||
<li><a
|
||
href="https://github.com/fakeJan499/ngx-error-msg">ngx-error-msg</a> -
|
||
The error message mapping library for Angular.</li>
|
||
<li><a
|
||
href="https://github.com/marcellodotgg/ngx-validators">ngx-validators</a>
|
||
- A library that provides additional Angular Validators, including the
|
||
ones Angular provides.</li>
|
||
<li><a
|
||
href="https://github.com/abarghoud/ngx-reactive-form-class-validator">ngx-reactive-form-class-validator</a>
|
||
- A lightweight library for dynamically validate Angular reactive forms
|
||
using <a
|
||
href="https://github.com/typestack/class-validator">class-validator</a>
|
||
library.</li>
|
||
<li><a
|
||
href="https://github.com/mkeller1992/ng-error-tooltips">ng-error-tooltips</a>
|
||
- An Angular library for reactive forms that displays tooltips on form
|
||
inputs with errors, providing a user-friendly way to visualize
|
||
validation messages.</li>
|
||
<li><a
|
||
href="https://github.com/apalaciosdev/ngx-forms-validator">ngx-forms-validator</a>
|
||
- A forms validator library for Angular.</li>
|
||
<li><a
|
||
href="https://github.com/chawkitariq/ngx-control-message">ngx-control-message</a>
|
||
- A library for binding a message to a synchronous or asynchronous form
|
||
control validator.</li>
|
||
<li><a href="https://github.com/algrith/safari-numfix">safari-numfix</a>
|
||
- A lightweight utility to safely handle paste and keydown events on
|
||
number input fields in Safari.</li>
|
||
<li><a
|
||
href="https://github.com/aks1376/ngx-input-errors">ngx-input-errors</a>
|
||
- This project was developed for Angular Reactive Forms to automatically
|
||
extract and display input validation error messages. This library
|
||
supports multiple languages and allows for custom error messages for
|
||
both standard form validations and user-defined validations.</li>
|
||
<li><a href="https://github.com/LuEsc/error-message">error-message</a> -
|
||
A lightweight, flexible error handling library for Angular applications
|
||
that provides standardized validation error display and management.</li>
|
||
<li><a
|
||
href="https://github.com/vbnr/ng-reactive-form-validate">ng-reactive-form-validate</a>
|
||
- This library streamlines form control validation, displaying error
|
||
messages based on rules, supporting customizable messages via static
|
||
strings or observables, integrating with Transloco for translations, and
|
||
applying default styles for smooth validation label transitions.</li>
|
||
<li><a
|
||
href="https://github.com/akehir/angular-password-checker">angular-password-checker</a>
|
||
- Protect your users from re-using a password known to be hacked with
|
||
this simple Angular directive.</li>
|
||
<li><a
|
||
href="https://github.com/RiskChallenger/translation-validation">translation-validation</a>
|
||
- Automatic validation messages for Angular forms in any language.</li>
|
||
</ul>
|
||
<h4 id="icons">Icons</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/FortAwesome/angular-fontawesome">angular-fontawesome</a>
|
||
- Official Angular component for Font Awesome 5+.</li>
|
||
<li><a
|
||
href="https://github.com/seiyria/ng2-fontawesome">ng2-fontawesome</a>- A
|
||
small directive making font awesome even easier to use.</li>
|
||
<li><a href="https://github.com/ng-icons/ng-icons">ng-icons</a> - The
|
||
ultimate icon library for Angular.</li>
|
||
<li><a href="https://github.com/primefaces/primeicons">primeicons</a> -
|
||
PrimeIcons is the default icon library of PrimeNG with over 250 open
|
||
source icons developed by PrimeTek.</li>
|
||
<li><a
|
||
href="https://github.com/czeckd/angular-svg-icon">angular-svg-icon</a> -
|
||
Angular component and service for inlining SVGs allowing them to be
|
||
easily styled with CSS.</li>
|
||
<li><a href="https://github.com/ngneat/svg-icon"><span class="citation"
|
||
data-cites="ngneat/svg-icon">@ngneat/svg-icon</span></a> - A lightweight
|
||
library that makes it easier to use SVG icons in your Angular
|
||
Application.</li>
|
||
<li><a
|
||
href="https://github.com/bodnya29179/Angular-Svg-Sprite">Angular-Svg-Sprite</a>
|
||
- Simplify SVG icon usage in your Angular project! Enhance the
|
||
flexibility and manageability of your Angular project by using SVG
|
||
sprites.</li>
|
||
<li><a href="https://github.com/dimaslz/ng-heroicons">ng-hero-icons</a>
|
||
- Use <a href="https://heroicons.com">Heroicons</a> in your Angular
|
||
application.</li>
|
||
<li><a
|
||
href="https://github.com/rdlabo-team/ionic-angular-collect-icons">ionic-angular-collect-icons</a>
|
||
- This library is used to uniquely group the ionIcons in a project, and
|
||
generate for export ionIcons file.</li>
|
||
<li><a
|
||
href="https://github.com/bennymeg/ngx-fluent-ui">ngx-fluent-ui</a> -
|
||
Angular & online library for Microsoft Fluent UI icons.</li>
|
||
<li><a
|
||
href="https://github.com/adisreyaj/angular-remix-icon">angular-remix-icon</a>
|
||
- Angular wrapper for Remixicon icon library.</li>
|
||
<li><a
|
||
href="https://github.com/marco-martins/angular-line-awesome">angular-line-awesome</a>
|
||
- Angular Line Awesome is an Angular component to manage <a
|
||
href="https://icons8.com/line-awesome">Line Awesome</a> icons.</li>
|
||
<li><a
|
||
href="https://github.com/pierreavn/angular-tabler-icons">angular-tabler-icons</a>
|
||
- This package allows you to use the <a
|
||
href="https://tabler.io/icons">Tabler Icons</a> in your Angular
|
||
applications.</li>
|
||
<li><a
|
||
href="https://github.com/push-based/ngx-fast-svg">ngx-fast-svg</a> -
|
||
SVGs, fast and developer friendly in Angular.</li>
|
||
<li><a
|
||
href="https://github.com/criar-art/angular-techs-logos">angular-techs-logos</a>
|
||
- Library of tech related icons.</li>
|
||
<li><a
|
||
href="https://github.com/bmartinson/ngx-x-browser-svg-mask">ngx-x-browser-svg-mask</a>
|
||
- Directive to easily achieve cross browser compliance while creating
|
||
SVG masks.</li>
|
||
<li><a href="https://github.com/khalilou88/semantic-icons">Semantic
|
||
icons</a> - A collection of free and open source icons ready for use in
|
||
your angular projects using the component attribute selector and the svg
|
||
tag.</li>
|
||
<li><a href="https://github.com/ngxpert/coolshapes">coolshapes</a> - An
|
||
Angular library aiming at allowing developers to use cool-looking
|
||
abstract shapes with little grainy gradients from <a
|
||
href="https://coolshap.es/">coolshapes</a>.</li>
|
||
<li><a href="https://github.com/lucide-icons/lucide">lucide</a> - An
|
||
open-source icon library that provides 1000+ vector (svg) files for
|
||
displaying icons and symbols in digital and non-digital projects. The
|
||
library aims to make it easier for designers and developers to
|
||
incorporate icons into their Angular projects by providing an official
|
||
<a
|
||
href="https://lucide.dev/guide/packages/lucide-angular">package</a>.</li>
|
||
<li><a href="https://github.com/ngverse/icons"><span class="citation"
|
||
data-cites="ngverse/icons">@ngverse/icons</span></a> - Angular library
|
||
that allows you to use popular open-source icons as regular
|
||
components.</li>
|
||
<li><a
|
||
href="https://github.com/aromero86/angular-phosphor-icons">angular-phosphor-icons</a>
|
||
- Set of components designed for utilizing <a
|
||
href="https://phosphoricons.com/">Phosphor Icons</a> in Angular via
|
||
directives.</li>
|
||
<li><a href="https://www.npmjs.com/package/@ic-on/main">ic-on</a> - The
|
||
future of iconing.</li>
|
||
<li><a href="https://github.com/adrian-ub/ngxi">ngxi</a> - A
|
||
comprehensive collection of SVG icons for Angular applications that
|
||
provides seamless integration with thousands of popular icons.</li>
|
||
<li><a
|
||
href="https://github.com/alimjanablikim/chill-wind-icons">chill-wind-icons</a>
|
||
- Dynamic Angular icon library with native Tailwind CSS support,
|
||
tree-shakeable icon data, and built from Iconoir SVGs.</li>
|
||
<li><a href="https://github.com/TSB04/svg-icon"><span class="citation"
|
||
data-cites="TSB04/svg-icon">@TSB04/svg-icon</span></a> - A
|
||
framework-agnostic, customizable, and lightweight SVG icon package for
|
||
React, Vue, Angular, and other JavaScript frameworks.</li>
|
||
</ul>
|
||
<h4 id="images">Images</h4>
|
||
<ul>
|
||
<li><a href="https://github.com/hm21/ngx-image-hero">ngx-image-hero</a>
|
||
- A package to implement hero animations, allowing users to click on
|
||
images and smoothly zoom them into a larger, immersive view, enhancing
|
||
the user experience and interaction with images.</li>
|
||
<li><a
|
||
href="https://github.com/Mawi137/ngx-image-cropper">ngx-image-cropper</a>
|
||
- An image cropper for Angular.</li>
|
||
<li><a
|
||
href="https://cloudinary.com/documentation/angular_integration">cloudinary</a>
|
||
- Angular SDK from Cloudinary.</li>
|
||
<li><a href="https://unpic.pics/img/angular/"><span class="citation"
|
||
data-cites="unpic/angular">@unpic/angular</span></a> - Angular directive
|
||
for responsive, high-performance images. Generates a responsive
|
||
<code><img></code> tag that follows best practices, with the
|
||
correct srcset, sizes and styles. Detects image URLs from most image
|
||
CDNs and CMSs and can resize images with no build step.</li>
|
||
<li><a
|
||
href="https://github.com/bmartinson/ngx-advanced-img">ngx-advanced-img</a>
|
||
- Angular attribute directives suite that provides various HTML img
|
||
feature extensions.</li>
|
||
<li><a
|
||
href="https://github.com/web-dave/ngx-img-cropper">ngx-img-cropper</a> -
|
||
Image cropping tool for Angular.</li>
|
||
<li><a
|
||
href="https://github.com/kurti-vdb/ngx-smart-cropper">ngx-smart-cropper</a>
|
||
- Angular standalone component that allows users to upload, crop, and
|
||
resize images with ease. It provides intuitive drag-and-resize
|
||
functionality, grid overlays, and supports various aspect ratios and
|
||
output formats.</li>
|
||
<li><a
|
||
href="https://github.com/vedph/ngx-annotorious">ngx-annotorious</a> -
|
||
Angular wrapper for <a href="https://annotorious.dev/">Annotorious
|
||
V3</a>, a library that adds annotations to images.</li>
|
||
<li><a
|
||
href="https://github.com/PsySanchez/ngx-easy-image-drawing">ngx-easy-image-drawing</a>
|
||
- Angular library for easy image drawing on a canvas.</li>
|
||
<li><a
|
||
href="https://github.com/Mohid123/ngx-blurhash-render">ngx-blurhash-render</a>
|
||
- Lighweight library that renders the blurhash of a provided image. For
|
||
Angular 15+. Requires <a
|
||
href="https://www.npmjs.com/package/blurhash">blurhash</a> as a
|
||
dependency.</li>
|
||
<li><a
|
||
href="https://github.com/medDV-GmbH/ngx-pinch-zoom">ngx-pinch-zoom</a> -
|
||
This module enables image zooming and positioning through touch screen
|
||
gestures.</li>
|
||
<li><a
|
||
href="https://github.com/andreagrossetti/ngx-broken-img">ngx-broken-img</a>
|
||
- Angular directive to fix broken url in img. If image url returns 404,
|
||
a placeholder is used to fill img’s src.</li>
|
||
<li><a href="https://github.com/jjmhalew/ngx-lightbox">ngx-lightbox</a>
|
||
- A <a href="https://github.com/lokesh/lightbox2">lightbox2</a>
|
||
implementation port to use with Angular >= 18 (zoneless).</li>
|
||
</ul>
|
||
<h4 id="keyboard-mouse">Keyboard Mouse</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/Raiper34/ngx-focus-control">ngx-focus-control</a>
|
||
- Library to provide tools to work with focus and focusable elements to
|
||
improve user interfaces and accessibility.</li>
|
||
<li><a
|
||
href="https://github.com/virtual-keyboard-javascript/virtual-keyboard-javascript.github.io">virtual-keyboard-javascript</a>
|
||
- Virtual Keyboard for Javascript, React, Angular, & Vue.</li>
|
||
<li><a
|
||
href="https://github.com/mohsen77sk/angular-touch-keyboard">angular-touch-keyboard</a>
|
||
- Virtual Keyboard for Angular applications.</li>
|
||
<li><a href="https://github.com/ngneat/hotkeys">hotkeys</a> - A
|
||
declarative library for handling hotkeys in Angular applications.</li>
|
||
<li><a
|
||
href="https://github.com/PerfectMemory/ngx-contextmenu">ngx-contextmenu</a>
|
||
- A context menu component for Angular.</li>
|
||
</ul>
|
||
<h4 id="layout-components">Layout Components</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/bertrandg/angular-split">angular-split</a> -
|
||
Angular split component.</li>
|
||
<li><a href="https://github.com/ngneat/overview">overview</a> - A
|
||
collection of tools to make your Angular views more modular, scalable,
|
||
and maintainable.</li>
|
||
<li><a href="https://github.com/ngbracket/ngx-layout">ngx-layout</a> -
|
||
Clone of Angular FlexLayout.</li>
|
||
<li><a href="https://github.com/kreuzerk/ng-sortgrid">ng-sortgrid</a> -
|
||
A grid that allows you to sort all items via drag & drop.</li>
|
||
<li><a
|
||
href="https://github.com/tiberiuzuld/angular-gridster2">angular-gridster2</a>
|
||
- Angular gridster 2.</li>
|
||
<li><a
|
||
href="https://github.com/katoid/angular-grid-layout">angular-grid-layout</a>
|
||
- Responsive grid with draggable and resizable items for Angular
|
||
applications.</li>
|
||
<li><a
|
||
href="https://github.com/gridstack/gridstack.js/tree/master/angular/">gridstack</a>
|
||
- Mobile-friendly modern Typescript library for dashboard layout and
|
||
creation. Making a drag-and-drop, multi-column responsive dashboard has
|
||
never been easier. Has multiple bindings and works great with
|
||
Angular.</li>
|
||
<li><a
|
||
href="https://github.com/omnedia/ngx-flickering-grid">ngx-flickering-grid</a>
|
||
- A simple component library to create a container with an animated grid
|
||
pattern background.</li>
|
||
<li><a
|
||
href="https://github.com/omnedia/ngx-gridpattern">ngx-gridpattern</a> -
|
||
A simple component library to create a container with an pattern
|
||
background.</li>
|
||
<li><a
|
||
href="https://github.com/omnedia/ngx-retro-grid">ngx-retro-grid</a> -
|
||
This component creates a 3D perspective grid with customizable colors,
|
||
rotation, and smooth animation, perfect for adding a nostalgic or
|
||
futuristic visual effect to your application.</li>
|
||
<li><a
|
||
href="https://github.com/ArslanAmeer/ngx-bottom-sheet">ngx-bottom-sheet</a>
|
||
- A highly customizable and lightweight Angular service that provides a
|
||
mobile-friendly bottom sheet component.</li>
|
||
<li><a href="https://github.com/otodockal/ngx-van">ngx-van</a> - Tiny
|
||
replacement for HTML nav element with mobile side nav menu built-in.
|
||
Good old nav element on desktop, sliding side nav on mobile. No
|
||
duplication.</li>
|
||
<li><a
|
||
href="https://github.com/charlesschaefer/ngx-swipe-menu">ngx-swipe-menu</a>
|
||
- A component to create “swipe left to ‘action’” experiences.</li>
|
||
<li><a
|
||
href="https://github.com/secanis/ng-simple-sidebar">ng-simple-sidebar</a>
|
||
- A simple Angular component to generate a sidebar with a hamburger
|
||
menu.</li>
|
||
<li><a href="https://github.com/karnavpargi/ngx-bladex">ngx-bladex</a> -
|
||
A simplistic blade component for Angular with minimize/maximize and a
|
||
close button.</li>
|
||
<li><a href="https://www.npmjs.com/package/@berg-layout/angular"><span
|
||
class="citation"
|
||
data-cites="berg-layout/angular">@berg-layout/angular</span></a> - This
|
||
is the Angular version of <a
|
||
href="https://github.com/blidblid/berg-layout">berg-layout</a>.</li>
|
||
<li><a
|
||
href="https://github.com/darekf77/static-columns">static-columns</a> -
|
||
Define columns with static width with Angular and FlexBox.</li>
|
||
<li><a
|
||
href="https://github.com/jtc10005/ngx-flex-layout">ngx-flex-layout</a> -
|
||
Port of <a href="https://github.com/angular/flex-layout"><span
|
||
class="citation"
|
||
data-cites="angular/flex-layout">@angular/flex-layout</span></a> to
|
||
provide support after EOL.</li>
|
||
</ul>
|
||
<h4 id="loaders">Loaders</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/tiberiuzuld/angular-busy">angular-busy</a> -
|
||
Show busy/loading indicators on any element during a
|
||
promise/Observable.</li>
|
||
<li><a
|
||
href="https://github.com/crisbeto/angular-svg-round-progressbar">angular-svg-round-progressbar</a>
|
||
- Angular module that uses SVG to create a circular progressbar.</li>
|
||
<li><a
|
||
href="https://github.com/knackstedt/dotglitch-ngx/tree/main/packages/common/src/components/lazy-loader">dotglitch-ngx</a>
|
||
- Highly customizable lazy loader for Angular components.</li>
|
||
<li><a
|
||
href="https://github.com/ArshdeepGrover/groupix-spinner-library">groupix-spinner-library</a>
|
||
- A lightweight Angular spinner library for seamless loading
|
||
animations!</li>
|
||
<li><a
|
||
href="https://github.com/arbrim/ng-loading-skeleton">ng-loading-skeleton</a>
|
||
- A lightweight and customizable Angular loading skeleton
|
||
component.</li>
|
||
<li><a
|
||
href="https://github.com/KernelPanic92/ngx-fastboot">ngx-fastboot</a> -
|
||
A dynamic configuration loader for Angular applications. It optimizes
|
||
the startup performance by loading configurations in a separate chunk
|
||
during compilation.</li>
|
||
<li><a
|
||
href="https://github.com/jsdaddy/ngx-loader-indicator">ngx-loader-indicator</a>
|
||
- Awesome loader for Angular applications. No wrappers only your
|
||
elements.</li>
|
||
<li><a
|
||
href="https://github.com/aitboudad/ngx-loading-bar">ngx-loading-bar</a>
|
||
- Automatic page loading / progress bar for Angular.</li>
|
||
<li><a
|
||
href="https://github.com/dkreider/ngx-loading-buttons">ngx-loading-buttons</a>
|
||
- A lightweight Angular library to add a loading spinner to your Angular
|
||
Material buttons.</li>
|
||
<li><a
|
||
href="https://github.com/shaman-apprentice/ngx-loading-overlay">ngx-loading-overlay</a>
|
||
- An Angular directive adding a loading overlay to your HTML.</li>
|
||
<li><a
|
||
href="https://github.com/dilipkumarsahoo/ngx-loading-page">ngx-loading-page</a>
|
||
- A sleek, adaptable loading page component featuring various loader
|
||
styles, dynamic themes, customizable backgrounds, and a responsive card
|
||
design built with Bootstrap.</li>
|
||
<li><a
|
||
href="https://github.com/MurhafSousli/ngx-progressbar">ngx-progressbar</a>
|
||
- Nanoscopic progress bar, featuring realistic trickle animations.</li>
|
||
<li><a
|
||
href="https://github.com/willmendesneto/ngx-skeleton-loader">ngx-skeleton-loader</a>
|
||
- Make beautiful, animated loading skeletons that automatically adapt to
|
||
your Angular apps.</li>
|
||
<li><a href="https://github.com/napster2210/ngx-spinner">ngx-spinner</a>
|
||
- A library for loading spinner for Angular.</li>
|
||
<li><a
|
||
href="https://github.com/thalsi/ngx-spinner-loading">ngx-spinner-loading</a>
|
||
- A lightweight, customizable Angular loading spinner package that
|
||
supports global, section-based, inline loaders, and automatic HTTP
|
||
integration via interceptors. Built with Angular standalone components
|
||
and signal-based state.</li>
|
||
<li><a
|
||
href="https://github.com/ngeenx/nx-svg-loaders">nx-svg-loaders</a> -
|
||
Angular, React, Svelte, Vue SVG loader/spinner collection.</li>
|
||
<li><a href="https://github.com/lukaVarga/skeletonizer">skeletonizer</a>
|
||
- A lightweight package that provides a simple way to create
|
||
skeletonized views for your application. It has adapters for Vue and
|
||
Angular and is highly customizable and easy to use.</li>
|
||
<li><a
|
||
href="https://github.com/mominrazashahid/square-progress">square-progress</a>
|
||
- Square progress bar with animation.</li>
|
||
</ul>
|
||
<h4 id="loggers">Loggers</h4>
|
||
<ul>
|
||
<li><a href="https://github.com/ngworker/lumberjack">lumberjack</a> -
|
||
Lumberjack is a versatile Angular logging library, specifically designed
|
||
to be extended and customized. It provides a few simple log drivers
|
||
out-of-the-box. It’s easy to enable the built-in log drivers or create
|
||
and use custom log drivers.</li>
|
||
<li><a
|
||
href="https://github.com/avernixtechnologies/angular-logger">angular-logger</a>
|
||
- A logger built with Angular in mind.</li>
|
||
<li><a href="https://github.com/Xilerth/ngx-logger"><span
|
||
class="citation"
|
||
data-cites="Xilerth/ngx-logger">@Xilerth/ngx-logger</span></a> - This
|
||
library empowers developers to seamlessly integrate custom logging
|
||
solutions tailored to their specific requirements, enabling efficient
|
||
debugging, monitoring, and analytics.</li>
|
||
<li><a
|
||
href="https://github.com/angular-extensions/pretty-html-log">pretty-html-log</a>
|
||
- A module that allows you to pretty print the inner HTML of
|
||
ComponentFixtures, DebugElements, NativeElements or even plain HTML
|
||
strings to the console. This is very useful for debugging Angular
|
||
component tests in Jest.</li>
|
||
<li><a href="https://github.com/secondbounce/log4ngx">log4ngx</a> - A
|
||
Typescript logging framework for Angular projects, based on concepts
|
||
used in Log4j, Log4net, etc.</li>
|
||
<li><a href="https://github.com/w5g-wywiwyg/ngx-wlog">ngx-wlog</a> - A
|
||
logger for Angular applications, drawing inspiration from the .NET <a
|
||
href="https://nlog-project.org/">NLog</a>.</li>
|
||
<li><a
|
||
href="https://github.com/souravion/ng-route-logger">ng-route-logger</a>
|
||
- A simple and powerful library that helps you track page navigation
|
||
times inside your Angular application.</li>
|
||
</ul>
|
||
<h4 id="maps">Maps</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/TGFTech/angular-cesium">angular-cesium</a> -
|
||
Creating map based web apps using Cesium and Angular.</li>
|
||
<li><a
|
||
href="https://github.com/Developer-Plexscape/cesium-angular-example">cesium-angular-example</a>
|
||
- A simple web application that demonstrates integration of <a
|
||
href="https://cesium.com">Cesium</a> with the LATEST version of
|
||
Angular.</li>
|
||
<li><a href="https://github.com/Wykks/ngx-mapbox-gl">ngx-mapbox-gl</a> -
|
||
Angular binding of mapbox-gl-js.</li>
|
||
<li><a href="https://github.com/ng-maps/ng-maps">ng-maps</a> - Modular
|
||
map components for Angular.</li>
|
||
<li><a href="https://github.com/bluehalo/ngx-leaflet">ngx-leaflet</a> -
|
||
Core Leaflet package for Angular.</li>
|
||
<li><a
|
||
href="https://github.com/bluehalo/ngx-leaflet-markercluster">ngx-leaflet-markercluster</a>
|
||
- Provides <a
|
||
href="https://github.com/Leaflet/Leaflet.markercluster">leaflet.markercluster</a>
|
||
integration into Angular projects.</li>
|
||
<li><a
|
||
href="https://github.com/maplibre/ngx-maplibre-gl">ngx-maplibre-gl</a> -
|
||
Angular binding of maplibre-gl.</li>
|
||
<li><a
|
||
href="https://github.com/arnaudleclerc/ng-azure-maps">ng-azure-maps</a>
|
||
- An Angular library, mostly an HTML-driven wrapper of the
|
||
azure-maps-controls package, allowing you to easily integrate its
|
||
functionalities into an Angular application.</li>
|
||
<li><a
|
||
href="https://www.here.com/docs/bundle/maps-api-for-javascript-developer-guide/page/topics/angular-practices.html">HERE
|
||
maps API for JavaScript</a> - You can integrate <a
|
||
href="https://www.here.com/">HERE Maps</a> with Angular to display
|
||
interactive maps, geocode addresses, calculate routes, and more, all
|
||
within the context of your Angular application.</li>
|
||
<li><a
|
||
href="https://github.com/Olympus-Analytics/ngx-gaia-gis">ngx-gaia-gis</a>
|
||
- An Angular service that simplifies map creation and interaction using
|
||
the powerful <a href="https://openlayers.org/">OpenLayers</a>
|
||
library.</li>
|
||
<li><a
|
||
href="https://github.com/lekhmanrus/ngx-google-maps-places">ngx-google-maps-places</a>
|
||
- Wrapper for new Google Maps Places API, making it easier to integrate
|
||
Google Places functionality into Angular applications.</li>
|
||
<li><a
|
||
href="https://github.com/ddubrava/angular-yandex-maps">angular-yandex-maps</a>
|
||
- Yandex.Maps Angular components that implement the Yandex.Maps
|
||
JavaScript API.</li>
|
||
</ul>
|
||
<h4 id="markdown">Markdown</h4>
|
||
<ul>
|
||
<li><a href="https://github.com/jfcere/ngx-markdown">ngx-markdown</a> -
|
||
Angular library that combines Marked, Prism.js, Emoji-Toolkit, KaTeX,
|
||
Mermaid and Clipboard.js.</li>
|
||
<li><a href="https://github.com/ericleib/ngx-remark">ngx-remark</a> -
|
||
Render markdown with custom Angular templates.</li>
|
||
<li><a
|
||
href="https://github.com/ghiscoding/angular-markdown-editor">angular-markdown-editor</a>
|
||
- Angular Markdown Editor. All-in-one Markdown Editor and Preview.</li>
|
||
<li><a href="https://github.com/dimpu/ngx-md">ngx-md</a> - Angular
|
||
directive for parsing markdown content in your web application.</li>
|
||
<li><a href="https://github.com/vincent/ngx-textile">ngx-textile</a> -
|
||
Use the Textile markup language in your Angular project using <a
|
||
href="https://github.com/borgar/textile-js">textile-js</a>.</li>
|
||
<li><a
|
||
href="https://github.com/bgotink/mdbook-angular">mdbook-angular</a> - A
|
||
renderer for <a
|
||
href="https://rust-lang.github.io/mdBook/index.html">mdbook</a> that
|
||
turns Angular code samples into running Angular applications.</li>
|
||
<li><a href="https://github.com/SalathielGenese/ngx-mdx">ngx-mdx</a> -
|
||
Take Angular lifecycle to Markdown for a seamless experience.</li>
|
||
</ul>
|
||
<h4 id="media">Media</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/chrisguttandin/angular-audio-context">angular-audio-context</a>
|
||
- An Angular wrapper for the Web Audio API’s AudioContext.</li>
|
||
<li><a
|
||
href="https://github.com/joldibaev/silicon-audio-wave">silicon-audio-wave</a>
|
||
- Very simple audio wave system from Silicon.</li>
|
||
<li><a
|
||
href="https://github.com/byteark/byteark-player-angular">byteark-player-angular</a>
|
||
- Player Container from <a
|
||
href="https://www.byteark.com/">ByteArk</a>.</li>
|
||
<li><a href="https://github.com/vidstack/player">Vidstack</a> - A
|
||
framework and collection of UI components for building and managing
|
||
custom media players on the web. You can use this library to build your
|
||
own player (see our examples), or use our production-ready Default
|
||
Layout and customize it to match your brand and site. See this <a
|
||
href="https://www.vidstack.io/docs/player/getting-started/installation/angular?styling=default-layout&provider=video">installation
|
||
guide</a>.</li>
|
||
<li><a href="https://www.npmjs.com/package/@dytesdk/web-core"><span
|
||
class="citation"
|
||
data-cites="dytesdk/web-core">@dytesdk/web-core</span></a> - This <a
|
||
href="https://docs.dyte.io/guides/livestream/client-setup/angular">quickstart</a>
|
||
shows how to add Dyte’s Livestream SDK to your Angular
|
||
applications.</li>
|
||
<li><a
|
||
href="https://github.com/angular-a11y/voicecapture-angular">voicecapture-angular</a>
|
||
- The library offers customizable options for handling voice input and
|
||
transcription, making it a flexible solution for enhancing user
|
||
interfaces.</li>
|
||
<li><a
|
||
href="https://github.com/LennonReid/ngx-video-timeline">ngx-video-timeline</a>
|
||
- Video playback progress bar component.</li>
|
||
<li><a href="https://github.com/RzoDev/ngx-cam-shoot">ngx-cam-shoot</a>
|
||
- A streamlined Angular component that simplifies using your device’s
|
||
camera and accelerates image capture and saving.</li>
|
||
<li><a href="https://velt.dev/">velt</a> - Add AI powered collaboration
|
||
features ridiculously fast.</li>
|
||
<li><a
|
||
href="https://github.com/cometchat/cometchat-uikit-angular">cometchat-uikit-angular</a>
|
||
- <a href="https://www.cometchat.com/">CometChat</a> Angular UI Kit
|
||
provides pre-built user interface kit that developers can use to quickly
|
||
integrate a reliable & fully featured chat experience into an
|
||
existing or a new app.</li>
|
||
<li><a
|
||
href="https://www.npmjs.com/package/@poseclop/ngx-video-player"><span
|
||
class="citation"
|
||
data-cites="poseclop/ngx-video-player">@poseclop/ngx-video-player</span></a>
|
||
- A lightweight video player component that emulates YouTube.</li>
|
||
<li><a
|
||
href="https://github.com/KSmp/ngx-lite-video">ngx-lite-video-v2</a> - An
|
||
updated fork of <a
|
||
href="https://github.com/karim-mamdouh/ngx-lite-video">ngx-lite-video</a>,
|
||
an Angular package that provides lazy loading capabilities for embedded
|
||
iframes from popular video-sharing platforms like YouTube and
|
||
Vimeo.</li>
|
||
</ul>
|
||
<h4 id="mixed-utilities">Mixed utilities</h4>
|
||
<ul>
|
||
<li><a href="https://github.com/rx-angular/rx-angular">rx-angular</a> -
|
||
RxAngular offers a toolkit for handling fully reactive apps with the
|
||
main focus on runtime performance, template rendering, and developer
|
||
experience.</li>
|
||
<li><a
|
||
href="https://github.com/taiga-family/ng-web-apis">ng-web-apis</a> - A
|
||
set of common utils for consuming Web APIs with Angular.</li>
|
||
<li><a href="https://github.com/graycoreio/daffodil">daffodil</a> -
|
||
Angular Ecommerce PWA Framework.</li>
|
||
<li><a href="https://github.com/ngworker/ngworker">ngworker</a> -
|
||
Monorepo for the <span class="citation"
|
||
data-cites="ngworker">@ngworker</span> NPM organization. Packages for
|
||
Angular applications and testing.</li>
|
||
<li><a href="https://github.com/jscutlery/devkit">jscutlery devkit</a> -
|
||
Tools that make Angular developer’s life easier.</li>
|
||
<li><a href="https://github.com/angular/components">angular
|
||
components</a> - Component infrastructure and Material Design components
|
||
for Angular.</li>
|
||
<li><a
|
||
href="https://github.com/lVlyke/lithium-angular">lithium-angular</a> -
|
||
Reactive components made easy! Lithium provides utilities that enable
|
||
seamless reactive state and event interactions for Angular
|
||
components.</li>
|
||
<li><a href="https://github.com/rxweb/rxweb">rxweb</a> - Tons of
|
||
extensively featured packages for Angular, Vue and React Projects.</li>
|
||
<li><a href="https://github.com/DmitryEfimenko/ngspot">ngspot</a> -
|
||
Collection of awesome Angular libraries.</li>
|
||
<li><a
|
||
href="https://github.com/angelnikolov/ts-cacheable">ts-cacheable</a> - A
|
||
popular platform-agnostic caching library.</li>
|
||
<li><a
|
||
href="https://github.com/ngxtension/ngxtension-platform">ngxtension-platform</a>
|
||
- Utilities for Angular.</li>
|
||
<li><a href="https://github.com/goetzrobin/spartan">spartan</a> -
|
||
Cutting-edge tools powering Angular full-stack development.</li>
|
||
<li><a href="https://github.com/ngify/ngify">ngify</a> - Use Angular
|
||
features outside of Angular.</li>
|
||
<li><a href="https://github.com/mikelgo/angular-kit">angular-kit</a> - A
|
||
set of powerful Angular tools including pipes, lifecycle hooks, and
|
||
reactive enhancements.</li>
|
||
<li><a
|
||
href="https://github.com/Angular-RU/angular-ru-sdk">angular-ru-sdk</a> -
|
||
A set of tool chains that implement common interaction patterns while
|
||
being unopinionated about their presentation. It represents an
|
||
abstraction of the core functionalities found in Angular.</li>
|
||
<li><a href="https://github.com/Dafnik/dfts-common">dfts-common</a> -
|
||
Collection of TypeScript and Angular libraries (QR Code, Bootstrap table
|
||
and icons, and other utilities).</li>
|
||
<li><a href="https://github.com/sinequa/sba-angular">sba-angular</a> -
|
||
<a href="https://www.sinequa.com/">Sinequa’s</a> Angular-based Search
|
||
Based Application (SBA) Framework.</li>
|
||
<li><a href="https://www.npmjs.com/package/ng-as">ng-as</a> - Angular
|
||
pipe and directive for type casting template variables.</li>
|
||
<li><a
|
||
href="https://github.com/pechemann/angular-toolbox">angular-toolbox</a>
|
||
- A library that provides useful tools for Angular apps
|
||
development.</li>
|
||
<li><a href="https://github.com/wghglory/ngx-lift">ngx-lift</a> - This
|
||
project has been crafted to enhance and simplify your Angular
|
||
development experience. In the dynamic web development landscape,
|
||
Angular stands out as a robust framework, and <code>ngx-lift</code> and
|
||
<code>clr-lift</code> complement it by offering a collection of
|
||
utilities, operators, and components.</li>
|
||
<li><a
|
||
href="https://github.com/orgs/Firestitch/repositories">firestitch</a> -
|
||
<a href="https://firestitch.com/">Firestitch</a> has a ton of open
|
||
source Angular solutions.</li>
|
||
<li><a
|
||
href="https://github.com/studiohyperdrive/hyperdrive-opensource"><span
|
||
class="citation"
|
||
data-cites="studiohyperdrive/ngx-tools">@studiohyperdrive/ngx-tools</span></a>
|
||
- A mono-repo providing several of the Angular based packages created
|
||
and maintained by the <a href="https://studiohyperdrive.be/">Studio
|
||
Hyperdrive</a> team.</li>
|
||
<li><a href="https://github.com/OPI-PIB/ngx-utility">ngx-utility</a> -
|
||
Various helpers for forms, zones, DOM manipulation, HTTP requests, and
|
||
more.</li>
|
||
<li><a href="https://github.com/sketch7/ssv.ngx">ssv.ngx</a> - Mono-repo
|
||
of libraries from <a href="https://github.com/sketch7">sketch7</a>. <a
|
||
href="https://github.com/sketch7/ssv.ngx/tree/master/libs/ngx.command#readme">ngx.command</a>
|
||
is a command pattern implementation for Angular. <a
|
||
href="https://github.com/sketch7/ssv.ngx/blob/master/libs/ngx.ux/README.md">ngx.ux</a>
|
||
provides UX essentials and utilities for building apps.</li>
|
||
<li><a href="https://github.com/js-smart/ng-kit">ng-kit</a> - Reusable
|
||
Angular components built with Angular Material and Bootstrap 5.x,
|
||
Utility classes/functions for Date, Form and String operations.</li>
|
||
<li><a
|
||
href="https://github.com/Liquid-JS/nxt-components">nxt-components</a> -
|
||
A collection of various Angular components.</li>
|
||
<li><a
|
||
href="https://github.com/milad-hub/ngx-signal-plus">ngx-signal-plus</a>
|
||
- A comprehensive utility library for Angular Signals that provides
|
||
enhanced functionality, operators, and utilities.</li>
|
||
<li><a
|
||
href="https://github.com/infinum/ngx-nuts-and-bolts">ngx-nuts-and-bolts</a>
|
||
- A collection of commonly used pieces of Angular-related code that are
|
||
used by <a href="https://infinum.com/">Infinum</a>.</li>
|
||
<li><a href="https://github.com/paddls/ngx-common">ngx-common</a> - A
|
||
collection of useful features to enhance your Angular apps.</li>
|
||
<li><a
|
||
href="https://github.com/dszendrei/ngx-signals-plus">ngx-signals-plus</a>
|
||
- Additional Signals to improve developer experience.</li>
|
||
<li><a href="https://github.com/almazrpe/ngx-kit">ngx-kit</a> -
|
||
Utilities for Angular Framework.</li>
|
||
<li><a
|
||
href="https://github.com/domideimel/ng-tool-collection">ng-tool-collection</a>
|
||
- Useful Tools written in Angular.</li>
|
||
<li><a href="https://yaagoub.org/">yaagoub</a> - Accelerate your
|
||
development with decorators, directives, icons, services, and OAuth
|
||
2.0.</li>
|
||
<li><a href="https://github.com/everllence/ngx-tools"><span
|
||
class="citation"
|
||
data-cites="everllence/ngx-tools">@everllence/ngx-tools</span></a> -
|
||
This repository contains a collection of libraries is designed to
|
||
elevate your Angular development experience.</li>
|
||
<li><a
|
||
href="https://github.com/love1024/ngx-oneforall">ngx-oneforall</a> - An
|
||
Angular library with reusable pipes, directives, services, decorators,
|
||
constants, enums…</li>
|
||
<li><a
|
||
href="https://github.com/DDtMM/angular-signal-generators">angular-signal-generators</a>
|
||
- Streamline your development with Angular Signal Generators, a library
|
||
of signals and utilities designed to replace common patterns for faster,
|
||
cleaner code.</li>
|
||
<li><a href="https://github.com/mihajm/mmstack">mmstack</a> - A monorepo
|
||
for mmstack libraries.</li>
|
||
<li><a href="https://github.com/tomaszatoo/ngx-libs"><span
|
||
class="citation"
|
||
data-cites="tomaszatoo/ngx-libs">@tomaszatoo/ngx-libs</span></a> -
|
||
Repository for some useful Angular libraries, such as <a
|
||
href="https://www.npmjs.com/package/@tomaszatoo/ngx-timer">ngx-timer</a>.</li>
|
||
<li><a href="https://github.com/shanieMoonlight/moonlight-repo"><span
|
||
class="citation"
|
||
data-cites="shanieMoonlight/moonlight-repo">@shanieMoonlight/moonlight-repo</span></a>
|
||
- This monorepo contains a collection of open source Angular libraries
|
||
and utilities developed by SpiderBaby, along with demo applications
|
||
showcasing their usage.</li>
|
||
<li><a href="https://github.com/jchpro/ng"><span class="citation"
|
||
data-cites="jchpro/ng">@jchpro/ng</span></a> - Monorepo of various
|
||
libraries for Angular. Visit <a href="https://ng.jchpro.pl/">example
|
||
page</a> for more info.</li>
|
||
<li><a href="https://gitlab.com/rxap/packages">rxap</a> - Reactive
|
||
Application Platform, or RxAP for short, is a collection of software
|
||
modules and tools. With the help of RxAP, the development effort of web
|
||
and cloud applications can be significantly reduced.</li>
|
||
<li><a href="https://github.com/ng-util/ng-util">ng-util</a> - A set of
|
||
Angular utilities.</li>
|
||
<li><a href="https://github.com/max-scopp/reactive-kit">reactive-kit</a>
|
||
- A lightweight set of utilities that make reactive Angular apps more
|
||
enjoyable and less boilerplate-heavy. Works great alongside
|
||
<code>ngxtension</code>.</li>
|
||
<li><a href="https://github.com/BhanukaDev/fireng">fireng</a> - A
|
||
collection of Angular libraries to simplify responsive development using
|
||
signals.</li>
|
||
</ul>
|
||
<h4 id="modals">Modals</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/boris-jenicek/ngx-awesome-popup">ngx-awesome-popup</a>
|
||
- Angular dialog modal framework (Confirmation box, Alert box, Toast
|
||
notification and Cookie banner).</li>
|
||
<li><a href="https://github.com/ngneat/dialog">dialog</a> - A simple to
|
||
use, highly customizable, and powerful modal.</li>
|
||
<li><a
|
||
href="https://github.com/GreenFlag31/modal-library">ngx-modal-ease</a> -
|
||
<code>ngx-modal-ease</code> is a versatile Angular library providing a
|
||
lightweight, simple, and performant modal.</li>
|
||
<li><a
|
||
href="https://github.com/criar-art/up-window-angular">up-window-angular</a>
|
||
- An Angular library designed to create dynamic, customizable modals and
|
||
window-based components for web applications.</li>
|
||
<li><a href="https://github.com/4gray/ngx-whats-new">ngx-whats-new</a> -
|
||
A simple library for creating multi-modal windows.</li>
|
||
<li><a href="https://github.com/soc221b/ngx-dialog">ngx-dialog</a> -
|
||
Type-safe Angular Dialogs Directive for Angular 16+.</li>
|
||
<li><a
|
||
href="https://github.com/nhusby/ng-modal-service">ng-modal-service</a> -
|
||
A simple Angular modal Service.</li>
|
||
<li><a
|
||
href="https://github.com/JustSolve-self-serve/strictly-typed-mat-dialog">strictly-typed-mat-dialog</a>
|
||
- Angular material library to improve type safety around mat
|
||
dialogs.</li>
|
||
<li><a
|
||
href="https://www.npmjs.com/package/ngx-light-modal">ngx-light-modal</a>
|
||
- A lightweight, dependency-free Angular modal package built with
|
||
standalone components and fully dynamic rendering. It supports modal
|
||
stacking, backdrop control, custom content components, and complete
|
||
lifecycle observables — without requiring a host component in your
|
||
templates.</li>
|
||
</ul>
|
||
<h4 id="notifications">Notifications</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/svierk/angular-bootstrap-toast-service">angular-bootstrap-toast-service</a>
|
||
- Angular project for sending Bootstrap based toast notifications
|
||
including Vercel deployment.</li>
|
||
<li><a
|
||
href="https://github.com/lazycuh/angular-notification">angular-notification</a>
|
||
- A singleton, global Angular service to programmatically show
|
||
notifications.</li>
|
||
<li><a
|
||
href="https://github.com/damingerdai/angular-toaster">angular-toaster</a>
|
||
- Updated fork of <a
|
||
href="https://github.com/Stabzs/Angular2-Toaster">Angular2-Toaster</a>.</li>
|
||
<li><a
|
||
href="https://github.com/rishi-rj-s/grand-notifications">grand-notifications</a>
|
||
- Beautiful, customizable toast notifications with artistic
|
||
animations.</li>
|
||
<li><a href="https://github.com/ngxpert/hot-toast">hot-toast</a> -
|
||
Smoking hot toast notifications for Angular.</li>
|
||
<li><a
|
||
href="https://github.com/rperezll/ng-fast-toast">ng-fast-toast</a> - A
|
||
fast and lightweight library for Angular 18+, also compatible with Ionic
|
||
projects (based on Angular), that makes handling alerts and
|
||
notifications effortless. Styled with Tailwind, but built for production
|
||
with a fully agnostic approach using Shadow DOM.</li>
|
||
<li><a
|
||
href="https://github.com/nhusby/ng-toast-service">ng-toast-service</a> -
|
||
A simple, customizable notification service for Angular applications.
|
||
This service shows notifications that slide onto the screen with
|
||
configurable behavior.</li>
|
||
<li><a href="https://github.com/awalhadi/notifyx">notifyx</a> - A
|
||
simple, customizable toast library for JavaScript/TypeScript with zero
|
||
dependencies.</li>
|
||
<li><a
|
||
href="https://github.com/thiagopg84/ngx-french-toast">ngx-french-toast</a>
|
||
- A lightweight and customizable toast library for your Angular 14+
|
||
applications. Show informative toast messages to enhance user experience
|
||
and provide important feedback or collect data with dynamically imported
|
||
components.</li>
|
||
<li><a
|
||
href="https://github.com/jonaaix/ngx-modern-alerts">ngx-modern-alerts</a>
|
||
- This library provides a flexible system for displaying banner and
|
||
floating alerts (notifications), complete with a notification hub,
|
||
timeouts, custom actions, and more.</li>
|
||
<li><a
|
||
href="https://github.com/pascaliske/ngx-notifications">ngx-notifications</a>
|
||
- Simple notifications module for Angular.</li>
|
||
<li><a href="https://github.com/sibiraj-s/ngx-notifier">ngx-notifier</a>
|
||
- A Simple Notification Service for Angular applications.</li>
|
||
<li><a href="https://github.com/tutkli/ngx-sonner">ngx-sonner</a> - An
|
||
opinionated toast component for Angular. A port of <span
|
||
class="citation" data-cites="emilkowalski">@emilkowalski</span>’s
|
||
sonner.</li>
|
||
<li><a
|
||
href="https://github.com/sweetalert2/ngx-sweetalert2">ngx-sweetalert2</a>
|
||
- Declarative, reactive, and template-driven SweetAlert2 integration for
|
||
Angular.</li>
|
||
<li><a href="https://github.com/scttcper/ngx-toastr">ngx-toastr</a> -
|
||
Notifications/Toastr.</li>
|
||
<li><a
|
||
href="https://github.com/Mazen-Embaby/ngx-toastr-notifier">ngx-toastr-notifier</a>
|
||
- Lightweight, customizable toast notifications for Angular 20+. A
|
||
modern replacement for toastr with Angular Material design and flexible
|
||
APIs.</li>
|
||
<li><a
|
||
href="https://documentation.onesignal.com/docs/angular-setup">OneSignal</a>
|
||
- With <a
|
||
href="https://github.com/OneSignal/onesignal-ngx">onesignal-ngx</a>, you
|
||
can integrate OneSignal, world’s leader for Mobile Push Notifications,
|
||
Web Push, and In-App Messaging, into your Angular app.</li>
|
||
<li><a href="https://github.com/andreasnicolaou/toastify">toastify</a> -
|
||
Lightweight and customizable toast notifications for web
|
||
applications.</li>
|
||
<li><a
|
||
href="https://github.com/andreasnicolaou/web-notifier">web-notifier</a>
|
||
- A lightweight and flexible web notification library that provides a
|
||
simple API for handling browser notifications using RxJS
|
||
observables.</li>
|
||
</ul>
|
||
<h4 id="printing">Printing</h4>
|
||
<ul>
|
||
<li><a href="https://github.com/selemxmn/ngx-print">ngx-print</a> - A
|
||
plug n’ play Angulae library to print your stuff.</li>
|
||
<li><a
|
||
href="https://github.com/aesopo1213/ngx-printify">ngx-printify</a> -
|
||
Angular utility library that simplifies the process of printing content
|
||
in your Angular applications. It provides a directive for easy
|
||
integration into your components and a service for programmatic
|
||
printing.</li>
|
||
<li><a
|
||
href="https://github.com/plaetzchen79/ngx-printer-demo">ngx-printer-demo</a>
|
||
- A simple Angular service to print a window, parts of a window (div),
|
||
images, HTMLElements or Angular Objects.</li>
|
||
</ul>
|
||
<h4 id="qr-codes">QR Codes</h4>
|
||
<ul>
|
||
<li><a href="https://github.com/mnahkies/ng-qrcode">ng-qrcode</a> - Easy
|
||
to use AOT compatible QR code generator for Angular projects.</li>
|
||
<li><a
|
||
href="https://github.com/cordobo/angularx-qrcode">angularx-qrcode</a> -
|
||
A fast and easy-to-use Ivy compatible Ionic and Angular QR Code
|
||
Generator library.</li>
|
||
<li><a
|
||
href="https://github.com/Dafnik/dfts-common/tree/main/libs/dfts-qrcode">dfts-qrcode</a>
|
||
- A tiny and simple-to-use JavaScript / TypeScript QR-Code generator
|
||
library. Fully type-safe and ES modules compatible.</li>
|
||
<li><a href="https://github.com/zxing-js/ngx-scanner">ngx-scanner</a> -
|
||
Angular QR code, Barcode, DataMatrix, scanner component using
|
||
ZXing.</li>
|
||
<li><a href="https://github.com/larscom/ng-qrcode-svg">ng-qrcode-svg</a>
|
||
- Simple QR code generator (SVG only) for Angular.</li>
|
||
<li><a
|
||
href="https://github.com/mustafaer/ngx-qrcode-generator">ngx-qrcode-generator</a>
|
||
- An Angular component that generates QR codes using the <a
|
||
href="https://github.com/neocotic/qrious">QRious</a> library.</li>
|
||
<li><a
|
||
href="https://github.com/id1945/ngx-scanner-qrcode">ngx-scanner-qrcode</a>
|
||
- This library is built to provide a solution scanner QR code. This
|
||
library takes in raw images and will locate, extract, and parse any QR
|
||
code found within.</li>
|
||
<li><a
|
||
href="https://github.com/mohamedfakhreldin/Angular-html5qrcode">Angular-html5qrcode</a>
|
||
- This library provides an Angular wrapper for the <a
|
||
href="https://github.com/mebjas/html5-qrcode">html5-qrcode</a> library,
|
||
allowing developers to easily integrate QR code and barcode scanning
|
||
functionalities into their applications.</li>
|
||
<li><a href="https://github.com/werthdavid/ngx-kjua">ngx-kjua</a> -
|
||
Angular QR-Code generator component using <a
|
||
href="https://github.com/lrsjng/kjua">kjua</a>.</li>
|
||
<li><a href="https://github.com/GNURub/ngx-qrcode">ngx-qrcode</a> - A
|
||
simple Angular 18+ component to generate QR codes. Based on <a
|
||
href="https://github.com/enzomanuelmangano/react-native-qrcode-skia">react-native-qrcode-skia</a>
|
||
library.</li>
|
||
<li><a
|
||
href="https://github.com/sezmars/ngx-scan-detect">ngx-scan-detect</a> -
|
||
Detects barcode or QR code scanning on document and emits the scanned
|
||
code.</li>
|
||
</ul>
|
||
<h4 id="router">Router</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/udayvunnam/xng-breadcrumb">xng-breadcrumb</a> -
|
||
Zero config breadcrumb solution. A lightweight, configurable and
|
||
reactive breadcrumbs for Angular 6 and beyond.</li>
|
||
<li><a
|
||
href="https://github.com/OuterlimitsTech/olt-ngx-breadcrumbs">olt-ngx-breadcrumbs</a>
|
||
- Angular Library for generating breadcrumbs based on the routing
|
||
state.</li>
|
||
<li><a href="https://github.com/ui-router/angular"><span
|
||
class="citation"
|
||
data-cites="ui-router/angular">@ui-router/angular</span></a> - <a
|
||
href="https://ui-router.github.io">UI-Router</a> for Angular:
|
||
State-based routing for Angular.</li>
|
||
<li><a href="https://github.com/mgechev/ngx-quicklink">ngx-quicklink</a>
|
||
- Quicklink prefetching strategy for the Angular router.</li>
|
||
<li><a
|
||
href="https://github.com/mgechev/ngx-hover-preload">ngx-hover-preload</a>
|
||
- Preload Angular lazy-loaded routes on mouse over.</li>
|
||
<li><a href="https://github.com/rbalet/ngx-href">ngx-href</a> - A
|
||
directive that allows href to understand Angular’s router while
|
||
retaining its default functionality.</li>
|
||
<li><a
|
||
href="https://github.com/perez247/ngx-route-manager">ngx-route-manager</a>
|
||
- A simple library to store all route urls used in the application.</li>
|
||
<li><a
|
||
href="https://github.com/rbalet/ngx-back-button">ngx-back-button</a> - A
|
||
library for handling proper Angular back button capability.</li>
|
||
<li><a
|
||
href="https://github.com/developwithmi/ngx-navigate-back">ngx-navigate-back</a>
|
||
- A lightweight Angular library designed to simplify navigation
|
||
management. With ngx-navigate-back, you can easily implement a “back”
|
||
functionality similar to the browser’s native back button, allowing
|
||
users to navigate to the previous page.</li>
|
||
<li><a
|
||
href="https://github.com/Jakob-em/storybook-addon-angular-router">storybook-addon-angular-router</a>
|
||
- A simple plugin to make working with the Angular router in <a
|
||
href="https://storybook.js.org/">Storybook</a> easier.</li>
|
||
<li><a
|
||
href="https://github.com/muuvmuuv/angular-router-menus">angular-router-menus</a>
|
||
- Enhance your Angular app’s navigation by defining menu entries
|
||
directly within the route. With full typing and customization based on
|
||
your requirements, you can create multiple navigations effortlessly.
|
||
Nested menus allow for dynamic dropdowns, while all menus are generated
|
||
and injected into various injection tokens for easy access anywhere in
|
||
your application.</li>
|
||
<li><a
|
||
href="https://github.com/ramiz4/ngx-multi-level-push-menu">ngx-multi-level-push-menu</a>
|
||
- A modern, accessible Angular component for responsive multi-level push
|
||
menus with extensive customization options.</li>
|
||
<li><a
|
||
href="https://github.com/akshykhade/ngx-foresight">ngx-foresight</a> -
|
||
An Angular integration of <a
|
||
href="https://foresightjs.com/">ForesightJS</a> that offers a router
|
||
preloading strategy by intelligently preloading lazy-loaded modules
|
||
based on user intent predictions derived from mouse and keyboard
|
||
interactions.</li>
|
||
</ul>
|
||
<h4 id="scroll">Scroll</h4>
|
||
<ul>
|
||
<li><a href="https://github.com/dhilt/ngx-ui-scroll">ngx-ui-scroll</a> -
|
||
Virtual/infinite scroll for Angular.</li>
|
||
<li><a
|
||
href="https://github.com/Nolanus/ngx-page-scroll">ngx-page-scroll</a> -
|
||
Animated scrolling functionality for Angular written in pure
|
||
TypeScript.</li>
|
||
<li><a
|
||
href="https://github.com/hm21/ngx-scroll-animations">ngx-scroll-animations</a>
|
||
- This minimalistic Angular directive, free from external dependencies,
|
||
empowers you to effortlessly implement CSS animations on elements. These
|
||
animations trigger when an element comes into view through scrolling on
|
||
the page. It seamlessly integrates with your choice of CSS
|
||
animations.</li>
|
||
<li><a
|
||
href="https://github.com/lVlyke/lithium-ngx-virtual-scroll">lithium-ngx-virtual-scroll</a>
|
||
- A fast and lightweight virtual scrolling solution for Angular that
|
||
supports single column lists, grid lists and view caching.</li>
|
||
<li><a href="https://github.com/robingenz/ngx-infinite-scroll"><span
|
||
class="citation"
|
||
data-cites="robingenz/ngx-infinite-scroll">@robingenz/ngx-infinite-scroll</span></a>
|
||
- Simple Angular directive for infinite scrolling.</li>
|
||
<li><a
|
||
href="https://github.com/alvarotrigo/angular-fullpage">angular-fullpage</a>
|
||
- Official component for fullPage.js, a fullscreen scrolling
|
||
library.</li>
|
||
<li><a
|
||
href="https://github.com/bartholomej/ngx-scrolltop">ngx-scrolltop</a> -
|
||
Lightweight, Material Design inspired button for scroll-to-top of the
|
||
page. No dependencies.</li>
|
||
<li><a
|
||
href="https://github.com/KingSora/OverlayScrollbars">OverlayScrollbars</a>
|
||
- A javascript scrollbar plugin that hides native scrollbars, provides
|
||
custom styleable overlay scrollbars and keeps the native functionality
|
||
and feeling.</li>
|
||
<li><a
|
||
href="https://github.com/MurhafSousli/ngx-scrollbar">ngx-scrollbar</a> -
|
||
Custom overlay-scrollbars with native scrolling mechanism.</li>
|
||
<li><a
|
||
href="https://github.com/omnedia/ngx-tracing-beam">ngx-tracing-beam</a>
|
||
- A simple component library to add an animated tracing beam to your
|
||
vertical scrolling.</li>
|
||
<li><a href="https://github.com/omnedia/ngx-marquee">ngx-marquee</a> - A
|
||
simple component library to create an infinite scrolling marquee with
|
||
your content.</li>
|
||
<li><a href="https://github.com/omnedia/ngx-scrollbar"><span
|
||
class="citation"
|
||
data-cites="omnedia/ngx-scrollbar">@omnedia/ngx-scrollbar</span></a> -
|
||
This component offers a custom scrollbar with smooth scrolling
|
||
functionality and allows for full control over its appearance through
|
||
styling.</li>
|
||
<li><a
|
||
href="https://github.com/Harvest-Dev/ngx-perfect-scrollbar">ngx-perfect-scrollbar</a>
|
||
- This fork of <a
|
||
href="https://github.com/zefoy/ngx-perfect-scrollbar">ngx-perfect-scrollbar</a>
|
||
is an Angular wrapper library for <a
|
||
href="https://utatti.github.io/perfect-scrollbar/">Perfect
|
||
Scrollbar</a>.</li>
|
||
<li><a
|
||
href="https://github.com/mfuu/ngx-virtual-dnd-list">ngx-virtual-dnd-list</a>
|
||
- A virtual scrolling list component that can be sorted by
|
||
dragging.</li>
|
||
<li><a
|
||
href="https://github.com/ProAngular/ngx-scroll-top">ngx-scroll-top</a> -
|
||
Configurable, lightweight back to top button for Angular projects.</li>
|
||
<li><a
|
||
href="https://github.com/iharbeck/ngx-virtual-scroller">ngx-virtual-scroller</a>
|
||
- Displays a virtual, “infinite” list. Supports horizontal/vertical,
|
||
variable heights, and multi-column.</li>
|
||
<li><a
|
||
href="https://github.com/HaidarZ/ng-mat-select-infinite-scroll">ng-mat-select-infinite-scroll</a>
|
||
- Infinite Scroll directive for Angular Material select component.</li>
|
||
<li><a
|
||
href="https://github.com/miminerd/horizontal-scroller">horizontal-scroller</a>
|
||
- Infinite horizontal scroller for Angular apps using Tailwind.</li>
|
||
<li><a href="https://github.com/Grsmto/simplebar">simplebar</a> - Custom
|
||
scrollbars vanilla JavaScript library with native scroll, done simple,
|
||
lightweight, easy to use and cross-browser.</li>
|
||
<li><a
|
||
href="https://github.com/dcbeck/ngx-responsive-virtual-scroll">ngx-responsive-virtual-scroll</a>
|
||
- A fast and lightweight virtual scrolling solution for Angular that
|
||
supports single column lists, responsive grid lists, and view
|
||
caching.</li>
|
||
<li><a
|
||
href="https://github.com/onexip/ngx-virtual-scroller-flexible">ngx-virtual-scroller-flexible</a>
|
||
- A ultra-fast and flexible virtual scroller, which can render an
|
||
unlimited set of items with different heights perfectly.</li>
|
||
<li><a
|
||
href="https://github.com/brakmic/ngx-perfect-scrollbar-portable">ngx-perfect-scrollbar-portable</a>
|
||
- Angular wrapper library for Perfect Scrollbar.</li>
|
||
</ul>
|
||
<h4 id="state-management">State Management</h4>
|
||
<h5 id="ngrx">NgRx</h5>
|
||
<ul>
|
||
<li><a href="https://ngrx.io/">Official website</a></li>
|
||
<li><a href="https://github.com/ngrx/platform">Official GitHub
|
||
repository</a> - Reactive State for Angular.</li>
|
||
<li><a
|
||
href="https://github.com/angular-university/ngrx-course">ngrx-course</a>
|
||
- Angular University Complete Guide.</li>
|
||
<li><a
|
||
href="https://github.com/btroncone/ngrx-store-localstorage">ngrx-store-localstorage</a>
|
||
- Simple syncing between <code>@ngrx/store</code> and local
|
||
storage.</li>
|
||
<li><a
|
||
href="https://github.com/angular-architects/ngrx-toolkit">ngrx-toolkit</a>
|
||
- Various Extensions for the NgRx Signal Store.</li>
|
||
<li><a
|
||
href="https://github.com/gabrielguerrero/ngrx-traits">ngrx-traits</a> -
|
||
NgRx Traits is a library to help you compose and reuse a set NGRX
|
||
actions, selectors, effects, and reducers across your app.</li>
|
||
<li><a href="https://github.com/Michsior14/ngrx-addons">ngrx-addons</a>
|
||
- A collection of NgRx addons, including state persistence.</li>
|
||
<li><a
|
||
href="https://github.com/larscom/ngrx-store-storagesync">ngrx-store-storagesync</a>
|
||
- Highly configurable state sync library between
|
||
localStorage/sessionStorage and <code>@ngrx/store</code>.</li>
|
||
<li><a
|
||
href="https://github.com/nilsmehlhorn/ngrx-wieder">ngrx-wieder</a> -
|
||
Lightweight undo-redo for Angular with NgRx & Immer.js.</li>
|
||
<li><a href="https://github.com/timdeschryver/ngrx-immer">ngrx-immer</a>
|
||
- Immer wrappers around NgRx methods createReducer, on, and
|
||
ComponentStore.</li>
|
||
<li><a
|
||
href="https://github.com/SaulMoro/ngrx-rtk-query">ngrx-rtk-query</a> -
|
||
Make RTK Query with Hooks works in Angular Applications.</li>
|
||
<li><a
|
||
href="https://github.com/stefanoslig/angular-ngrx-nx-realworld-example-app">angular-ngrx-nx-realworld-example-app</a>
|
||
- Real world application built with Angular 17, NgRx 17, & Nx
|
||
17.</li>
|
||
<li><a
|
||
href="https://github.com/yurakhomitsky/ngx-view-state">ngx-view-state</a>
|
||
- Library for handling Loading/Success/Error in NgRx.</li>
|
||
<li><a href="https://github.com/ngxp/store-service">store-service</a> -
|
||
Adds an abstraction layer / facade between Angular components and the
|
||
NgRx store.</li>
|
||
<li><a
|
||
href="https://github.com/k3nsei/ngx-signal-store-query">ngx-signal-store-query</a>
|
||
- Signal Store feature that bridges with <a
|
||
href="https://tanstack.com/query/latest/docs/framework/angular/overview">Angular
|
||
Query</a>.</li>
|
||
<li><a href="https://github.com/DaveMBush/SmartNgRX">SmartNgRX</a> - A
|
||
library that hides most of NgRx from the developer for CRUD operations
|
||
while still using NgRx under the hood and allowing you to use it with
|
||
existing NgRx code.</li>
|
||
<li><a
|
||
href="https://github.com/angular-architects/ngrx-hateoas">ngrx-hateoas</a>
|
||
- A library to bring hypermedia json into the NgRx Signal Store
|
||
following the HATEOAS approach.</li>
|
||
<li><a
|
||
href="https://github.com/acandylevey/ngrx-http-tracking">ngrx-http-tracking</a>
|
||
- This NgRx library is aimed at slotting into your pre-existing NgRx
|
||
stores to reduce the amount of boilerplate code you need to write and
|
||
make handling the loading, success, and error states of HTTP requests
|
||
significantly easier.</li>
|
||
<li><a href="https://github.com/smoosee/ngrx-manager">ngrx-manager</a> -
|
||
Plug-N-Play State Manager for NgRx stores.</li>
|
||
<li><a href="https://github.com/parloti/ngrx-set">ngrx-set</a> - This
|
||
simplifies the creation of actions for asynchronous requests that can
|
||
succeed, fail, or be aborted.</li>
|
||
<li><a
|
||
href="https://github.com/NGneers/easy-ngrx-distinct-selector">easy-ngrx-distinct-selector</a>
|
||
- Provides functions to easily create <code>@ngrx/store</code> selectors
|
||
with equal functions for arguments and result values.</li>
|
||
</ul>
|
||
<h5 id="ngxs">NGXS</h5>
|
||
<ul>
|
||
<li><a href="https://www.ngxs.io/">Official website</a></li>
|
||
<li><a href="https://github.com/ngxs/store">Official GitHub
|
||
repository</a> - NGXS tries to make things as simple and accessible as
|
||
possible with less boilerplate and code to maintain.</li>
|
||
<li><a href="https://github.com/ngxs-labs/emitter">emitter</a> - New
|
||
pattern that provides the opportunity to feel free from actions.</li>
|
||
<li><a
|
||
href="https://github.com/ngxs-labs/select-snapshot">select-snapshot</a>
|
||
- Flexibile decorator that allows to get a snapshot of the state.</li>
|
||
<li><a
|
||
href="https://github.com/ngxs-labs/actions-executing">actions-executing</a>
|
||
- This plugin allows you to easily know if an action is being executed
|
||
and control UI elements or control flow of your code to execute.</li>
|
||
<li><a
|
||
href="https://github.com/lVlyke/ngxs-synchronizers">ngxs-synchronizers</a>
|
||
- Simplifies synchronizing your NGXS-based application state with
|
||
external data sources.</li>
|
||
<li><a
|
||
href="https://github.com/Andreas-Hjortland/ngxs-message-plugin">ngxs-message-plugin</a>
|
||
- An NGXS plugin which allows you to share state between different
|
||
browser contexts.</li>
|
||
<li><a
|
||
href="https://github.com/ngxs-labs/firestore-plugin">firestore-plugin</a>
|
||
- Firestore plugin for NGXS.</li>
|
||
<li><a
|
||
href="https://github.com/ng-turkey/ngxs-reset-plugin">ngxs-reset-plugin</a>
|
||
- Reset plugin for NGXS: Effortlessly clears, resets, or overwrites NGXS
|
||
states respecting the state tree.</li>
|
||
</ul>
|
||
<h5 id="additional">Additional</h5>
|
||
<ul>
|
||
<li><a href="https://github.com/ngneat/elf">elf</a> - A reactive
|
||
immutable state management solution built on top of RxJS. It uses custom
|
||
RxJS operators to query the state and pure functions to update it.</li>
|
||
<li><a
|
||
href="https://github.com/nigrosimone/ng-simple-state">ng-simple-state</a>
|
||
- Simple state management in Angular with only Services and RxJS.</li>
|
||
<li><a href="https://github.com/Marcisbee/exome">exome</a> - Simple
|
||
proxy based state manager for deeply nested states, works with Angular
|
||
Signals and RxJS.</li>
|
||
<li><a href="https://github.com/TanStack/query">query</a> - Powerful
|
||
asynchronous state management, server-state utilities and data fetching
|
||
for the web.</li>
|
||
<li><a href="https://github.com/state-adapt/state-adapt">state-adapt</a>
|
||
- Declarative, incremental state management library.</li>
|
||
<li><a
|
||
href="https://github.com/simplifiedcourses/ngx-signal-state">ngx-signal-state</a>
|
||
- Opinionated simple state management for Angular.</li>
|
||
<li><a
|
||
href="https://github.com/spierala/mini-rx-store">mini-rx-store</a> -
|
||
MiniRx is the reactive state management platform.</li>
|
||
<li><a href="https://github.com/e-oz/ngx-collection">ngx-collection</a>
|
||
- Collection State Management Service for Angular.</li>
|
||
<li><a href="https://github.com/statelyai/xstate">xstate</a> -
|
||
Actor-based state management & orchestration for complex app
|
||
logic.</li>
|
||
<li><a href="https://github.com/zuriscript/signalstory">signalstory</a>
|
||
- A state management library based on Angular signals. It offers a range
|
||
of architectural options, from simple repository-based state management
|
||
(signal-in-a-service) to orchestrating decoupled commands, handling side
|
||
effects through encapsulated objects, and facilitating inter-store
|
||
communication using an event-driven approach.</li>
|
||
<li><a href="https://github.com/politie/ngx-sherlock">ngx-sherlock</a> -
|
||
<code>ngx-sherlock</code> is an Angular tooling library to be used with
|
||
the <a href="https://github.com/politie/sherlock"><span class="citation"
|
||
data-cites="politie/sherlock">@politie/sherlock</span></a> distributed
|
||
reactive state management library.</li>
|
||
<li><a href="https://github.com/AmadeusITGroup/tansu">tansu</a> - A
|
||
lightweight, push-based state management library. It works well with <a
|
||
href="https://amadeusitgroup.github.io/tansu/#md:tansu-works-well-with-the-angular-ecosystem">the
|
||
Angular ecosystem</a>.</li>
|
||
<li><a href="https://github.com/worktile/store"><span class="citation"
|
||
data-cites="tethys/store">@tethys/store</span></a> - A mini, yet
|
||
powerful state management library for Angular.</li>
|
||
<li><a href="https://github.com/reduxjs/angular-redux">angular-redux</a>
|
||
- Unofficial Angular bindings for <a
|
||
href="https://redux.js.org/">Redux</a>.</li>
|
||
<li><a href="https://github.com/bitfiber/ng">ng</a> - An
|
||
Angular-specific extension of <a
|
||
href="https://github.com/bitfiber/rx"><span class="citation"
|
||
data-cites="bitfiber/rx">@bitfiber/rx</span></a> built on top of RxJS,
|
||
designed to manage reactive state, asynchronous workflows, and events in
|
||
Angular applications. It provides a structured approach to handling
|
||
complex data flows using emitters, states, groups, and stores, allowing
|
||
seamless integration of various reactive sources like emitters, states,
|
||
and observables.</li>
|
||
<li><a href="https://github.com/henryruhs/ngx-crud">ngx-crud</a> - CRUD
|
||
services in Angular with effortless aborting, caching and
|
||
observing.</li>
|
||
<li><a
|
||
href="https://github.com/state-management/ngx-state-machine">ngx-state-machine</a>
|
||
- An Angular wrapper for the <a
|
||
href="https://www.npmjs.com/package/@state-management/simple-state-machine">simple-state-machine</a>
|
||
library. It integrates the state machine into Angular applications by
|
||
making the <code>StateMachine</code> injectable as a service.</li>
|
||
<li><a href="https://github.com/ng-state/store"><span class="citation"
|
||
data-cites="ng-state/store">@ng-state/store</span></a> - RxJS and Immer
|
||
(or ImmutableJs) powered nested state management for Angular
|
||
applications inspired by NgRx. It is simple, fast, reliable with no
|
||
boilerplate. Supports signals and injectable actions.</li>
|
||
<li><a
|
||
href="https://github.com/LionMarc/ng-simple-state-management">ng-simple-state-management</a>
|
||
- Simple state management implementation for Angular applications. This
|
||
project provides several libraries for additional functionality.</li>
|
||
<li><a
|
||
href="https://github.com/Pierre-MarieMarchio/ngx-statewise">ngx-statewise</a>
|
||
- A state management solution for Angular applications, offering a
|
||
lighter and easier-to-use alternative to libraries like NgRx or NGXS,
|
||
while maintaining a clear and predictable architecture for managing your
|
||
application’s state.</li>
|
||
<li><a
|
||
href="https://github.com/NikitaTopchii/fsm-state-manager">fsm-state-manager</a>
|
||
- A simple, flexible and strongly-typed finite state machine manager for
|
||
managing state transitions in Angular or any TypeScript-based
|
||
application.</li>
|
||
</ul>
|
||
<h4 id="storage">Storage</h4>
|
||
<ul>
|
||
<li><a href="https://rxdb.info/">rxdb</a> - RxDB can be used as an
|
||
abstraction layer for <a
|
||
href="https://rxdb.info/articles/angular-indexeddb.html">IndexedDB</a>.</li>
|
||
<li><a
|
||
href="https://github.com/e-oz/ngx-reactive-storage">ngx-reactive-storage</a>
|
||
- Wrapper around IndexedDB and localStorage that allows you to create
|
||
databases and tables using a simple, promise-based API. Changes to the
|
||
data can be seen with Angular Signals or RxJS Observables.</li>
|
||
<li><a
|
||
href="https://github.com/PillowPillow/ng2-webstorage">ng2-webstorage</a>
|
||
- LocalStorage and SessionStorage manager.</li>
|
||
<li><a
|
||
href="https://github.com/assuncaocharles/ngx-indexed-db">ngx-indexed-db</a>
|
||
- Wraps IndexedDB in an Angular service.</li>
|
||
<li><a
|
||
href="https://github.com/cyrilletuzi/angular-async-local-storage">angular-async-local-storage</a>
|
||
- Efficient client-side storage for Angular: simple API + performance +
|
||
Observables + validation.</li>
|
||
<li><a href="https://github.com/maxnowack/signaldb">signaldb</a> - A
|
||
local JavaScript database with a MongoDB-like interface and TypeScript
|
||
support, enabling optimistic UI with signal-based reactivity. It
|
||
integrates easily with Angular, Solid.js, Preact, and Vue, simplifying
|
||
data management with schema-less design, in-memory storage, and fast
|
||
queries.</li>
|
||
<li><a href="https://github.com/dexie/Dexie.js">dexie</a> - A
|
||
Minimalistic Wrapper for IndexedDB.</li>
|
||
<li><a
|
||
href="https://github.com/cipchk/angular-web-storage">angular-web-storage</a>
|
||
- Angular decorator to save and restore of HTML5 Local & Session
|
||
Storage.</li>
|
||
<li><a
|
||
href="https://github.com/AshenHiroshana/indexeddb-helper">indexeddb-helper</a>
|
||
- A library designed to simplify interaction with IndexedDB in Angular
|
||
applications. It provides a clean API for performing CRUD operations
|
||
with support for cache expiration, data storage, and retrieval.</li>
|
||
<li><a
|
||
href="https://github.com/edisonaugusthy/ng-storage">ng-storage</a> - A
|
||
modern, reactive Angular service for browser storage management with
|
||
AES-GCM encryption, TTL, change notifications, and Apollo-style
|
||
providers.</li>
|
||
</ul>
|
||
<h4 id="tooltips">Tooltips</h4>
|
||
<ul>
|
||
<li><a href="https://github.com/ngneat/helipopper">helipopper</a> - A
|
||
Powerful Tooltip and Popover for Angular Applications.</li>
|
||
<li><a href="https://github.com/ncstate-sat/popover">popover</a> -
|
||
Popover component for Angular.</li>
|
||
<li><a
|
||
href="https://github.com/mkeller1992/ngx-tooltip-directives">ngx-tooltip-directives</a>
|
||
- This library offers three different tooltip directives (string, html
|
||
and template) and draws inspiration from the no longer maintained <a
|
||
href="https://github.com/drozhzhin-n-e/ng2-tooltip-directive">ng2-tooltip-directive</a>.</li>
|
||
<li><a
|
||
href="https://github.com/babybeet/angular-tooltip">angular-tooltip</a> -
|
||
Easily show tooltips programmatically and/or declaratively in
|
||
Angular.</li>
|
||
<li><a
|
||
href="https://github.com/farengeyt451/ngx-tippy-wrapper">ngx-tippy-wrapper</a>
|
||
- Angular wrapper for <a
|
||
href="https://github.com/atomiks/tippyjs">Tippy.js</a>.</li>
|
||
<li><a
|
||
href="https://github.com/chandumaram/tooltip-testing">tooltip-testing</a>
|
||
- Tooltip for Angular, forked from <code>cm-angular-tooltip</code>.</li>
|
||
<li><a href="https://github.com/al-march/ngx-popovers">ngx-popovers</a>
|
||
- An Angular library based on <a
|
||
href="https://floating-ui.com/">Floating UI</a> with already ready-made
|
||
components to use.</li>
|
||
<li><a
|
||
href="https://github.com/lazycuh/angular-tooltip">angular-tooltip</a> -
|
||
Easily show tooltips programmatically and/or declaratively in
|
||
Angular.</li>
|
||
<li><a
|
||
href="https://github.com/bastienmoulia/ngx-overlay">ngx-overlay</a> - A
|
||
lightweight Angular library designed to leverage the latest CSS and HTML
|
||
features while maintaining compatibility with most browsers. It provides
|
||
an elegant solution for creating overlay components such as modals,
|
||
tooltips, and popups using modern web standards.</li>
|
||
</ul>
|
||
<h4 id="ui-libraries">UI Libraries</h4>
|
||
<h5 id="unspecified">Unspecified</h5>
|
||
<ul>
|
||
<li><a href="https://js.devexpress.com/Overview/Angular/">Dev
|
||
Extreme</a> - Feature-Complete 65+ Angular Component Suite.</li>
|
||
<li><a
|
||
href="https://www.syncfusion.com/angular-components">Syncfusion</a> -
|
||
Its <a
|
||
href="https://github.com/syncfusion/essential-ui-kit-for-angular">Essential
|
||
UI Kit for Angular</a> is compatible with both Tailwind CSS and
|
||
Bootstrap.</li>
|
||
<li><a
|
||
href="https://github.com/syncfusion/ej2-angular-ui-components">ej2-angular-ui-components</a>
|
||
- Syncfusion Angular UI Components library has been built from the
|
||
ground up to be lightweight, responsive, modular and touch friendly. It
|
||
offers 70+ UI components that every applications will ever need.</li>
|
||
<li><a href="https://github.com/akveo/nebular">Nebular</a> -
|
||
Customizable Angular UI Library based on Eva Design System.</li>
|
||
<li><a href="https://github.com/NG-ZORRO/ng-zorro-antd">NG-ZORRO</a> -
|
||
An enterprise-class UI components based on Ant Design and Angular.</li>
|
||
<li><a href="https://github.com/ng-alain/ng-alain/">NG-ALAIN</a> -
|
||
NG-ZORRO admin panel front-end framework.</li>
|
||
<li><a href="https://github.com/zard-ui/zardui">zardui</a> - A
|
||
collection of beautiful and accessible components for Angular based in
|
||
<a href="https://github.com/shadcn-ui/ui">shadcn-ui</a> and NG-ZORRO.
|
||
Fully open source and free.</li>
|
||
<li><a href="https://github.com/swimlane/ngx-ui">ngx-ui</a> - Style and
|
||
Component Library for Angular2 and beyond!</li>
|
||
<li><a href="https://github.com/primefaces/primeng">prime-ng</a> - The
|
||
Most Complete Angular UI Component Library.</li>
|
||
<li><a href="http://wijmo.com/products/wijmo-5/">Wijmo 5</a> - Set of UI
|
||
components for Angular2.</li>
|
||
<li><a href="https://taiga-ui.dev/">Taiga UI</a> - Powerful set of open
|
||
source components for Angular!</li>
|
||
<li><a
|
||
href="https://amadeusitgroup.github.io/AgnosUI/latest/">AgnosUI</a> -
|
||
Highly configurable headless framework agnostic component library.</li>
|
||
<li><a href="https://github.com/DevCloudFE/ng-devui">ng-devui</a> -
|
||
Angular UI Component Library based on DevUI Design.</li>
|
||
<li><a href="https://github.com/allianz/ng-aquila">ng-aquila</a> -
|
||
Aquila is an open-source component library provided by the Allianz
|
||
Global Digital Factory (GDF). We use this library internally with
|
||
Allianz branding. Here we provide a white label variant of these
|
||
components.</li>
|
||
<li><a
|
||
href="https://github.com/infor-design/enterprise-ng">enterprise-ng</a> -
|
||
Angular wrappers for IDS Enterprise components.</li>
|
||
<li><a href="https://github.com/oblique-bit/oblique">oblique</a> - An
|
||
Angular front-end framework Tailored for your swiss branded business web
|
||
application, Oblique provides a standardized corporate design look and
|
||
feel as well as a collection of ready-to-use Angular components.</li>
|
||
<li><a href="https://github.com/SAP/fundamental-ngx">fundamental-ngx</a>
|
||
- Fundamental Library for Angular is SAP Design System Angular component
|
||
library.</li>
|
||
<li><a
|
||
href="https://github.com/kirbydesign/designsystem">designsystem</a> -
|
||
Kirby Design System is a UX Component library implementing the Kirby
|
||
Design Philosophy.</li>
|
||
<li><a
|
||
href="https://github.com/sbb-design-systems/sbb-angular">sbb-angular</a>
|
||
- Angular Library for SBB.</li>
|
||
<li><a href="https://github.com/alauda/ui">ui</a> - Enterprise level
|
||
Angular UI framework from Alauda Frontend Team.</li>
|
||
<li><a href="https://github.com/atinc/ngx-tethys">ngx-tethys</a> - Fast
|
||
and reliable Tethys Design components for Angular.</li>
|
||
<li><a
|
||
href="https://github.com/digipolisantwerp/antwerp-ui_angular">antwerp-ui_angular</a>
|
||
- Antwerp UI is a component interface library for building user
|
||
interfaces and responsive web apps.</li>
|
||
<li><a
|
||
href="https://github.com/vmware-clarity/ng-clarity">ng-clarity</a> -
|
||
Clarity Angular is a scalable, accessible, customizable, open-source
|
||
design system built for Angular.</li>
|
||
<li><a
|
||
href="https://github.com/ngx-semantic/ngx-semantic">ngx-semantic</a> - A
|
||
new take on an Angular implementation for Semantic UI.</li>
|
||
<li><a
|
||
href="https://github.com/tonysamperi/ngx-float-ui">ngx-float-ui</a> -
|
||
Angular wrapper for the <a href="https://floating-ui.com/">Floating
|
||
UI</a> library.</li>
|
||
<li><a
|
||
href="https://github.com/orchestratora/orchestrator">orchestrator</a> -
|
||
Extensible orchestrator for UI and forms for Angular.</li>
|
||
<li><a href="https://github.com/winona-ui/winonang">winonang</a> - Part
|
||
of the Winona UI suite, aimed at providing seamless UI components for
|
||
Angular developers. Our goal is to ensure that these components work
|
||
flawlessly on Windows, but they are designed to be cross-platform
|
||
compatible as well.</li>
|
||
<li><a
|
||
href="https://github.com/carbon-design-system/carbon-components-angular">carbon-components-angular</a>
|
||
- An Angular implementation of the Carbon Design System for IBM.</li>
|
||
<li><a
|
||
href="https://github.com/dyte-io/ui-kit/tree/staging/packages/angular-library">dyte-io/ui-kit</a>
|
||
- Dyte’s UI Kit is a prebuilt design library of UI components that makes
|
||
it easy to integrate video and voice calls into any app or website
|
||
within minutes.</li>
|
||
<li><a href="https://github.com/osspkg/onega-ui">onega-ui</a> - A modern
|
||
and stylish UI kit that offers a wide range of UI components and
|
||
elements to create professional and attractive websites.</li>
|
||
<li><a href="https://github.com/Kordrad/ng-zen">ng-zen</a> - A versatile
|
||
Angular library and CLI tool offering UI-kit Angular schematics for
|
||
streamlined integration into projects. The tool is currently in the
|
||
Alpha phase.</li>
|
||
<li><a href="https://github.com/thekhegay/ngwr">ngwr</a> - Angular UI
|
||
kit to make stylish Angular applications.</li>
|
||
<li><a
|
||
href="https://github.com/WindMillCode/Windmillcode-Angular-CDK">Windmillcode-Angular-CDK</a>
|
||
- Provides a collection of reusable UI components, each crafted with
|
||
attention to detail and performance.</li>
|
||
<li><a href="https://github.com/vcl/ng-vcl">ng-vcl</a> - Angular VCL ‒
|
||
an Angular component library based on the <a
|
||
href="https://vcl.github.io">VCL</a> CSS eco system.</li>
|
||
<li><a href="https://ngxui.com/docs">ngx-ui</a> - NGXUI from <a
|
||
href="https://github.com/omnedia">Omnedia</a> is a collection of
|
||
standalone components that you can simply install and use in your
|
||
Angular projects. It primarily features components, blocks, and
|
||
templates geared towards creating landing pages and user-facing
|
||
marketing materials.</li>
|
||
<li><a href="https://github.com/po-ui/po-angular">po-angular</a> -
|
||
Component library based on Angular. Documentation in Portuguese.</li>
|
||
<li><a
|
||
href="https://github.com/evenuxjs/ngx-nighthawk">ngx-nighthawk</a> - It
|
||
offers a comprehensive set of components that are highly configurable
|
||
and user-friendly. This package integrates the best open-source tools,
|
||
such as Bootstrip — a streamlined version of Bootstrap that focuses
|
||
solely on Grid and Utility features.</li>
|
||
<li><a
|
||
href="https://github.com/serionist/tableau-ui-angular">tableau-ui-angular</a>
|
||
- A third-party component library that brings Tableau-style components
|
||
to Angular.</li>
|
||
<li><a href="https://github.com/ngverse/ui"><span class="citation"
|
||
data-cites="ng-verse/ui">@ng-verse/ui</span></a> - A collection of
|
||
feature-rich Angular components, directives, and pipes. Unlike
|
||
traditional UI libraries, it requires no installation—just copy and
|
||
paste what you need into your project. Check the <a
|
||
href="https://ui.ngverse.dev/">docs</a> for more.</li>
|
||
<li><a href="https://bryntum.com/">bryntum</a> - World class web
|
||
components for calendars, gantt charts, kanban boards, and
|
||
scheduling.</li>
|
||
<li><a href="https://github.com/TanerSaydam/flexi-ui">flexi-ui</a> - <a
|
||
href="https://flexi-ui.ecnorow.com/">Flexi UI</a> provides a collection
|
||
of reusable, visually appealing, and functional UI components to help
|
||
you create modern and impressive front-end applications effortlessly.
|
||
The library is fully customizable and open-source, making it accessible
|
||
for everyone to use and contribute.</li>
|
||
<li><a href="https://github.com/koobiq/angular-components"><span
|
||
class="citation"
|
||
data-cites="koobiq/angular-components">@koobiq/angular-components</span></a>
|
||
- An open-source design system for designers and developers, focused on
|
||
designing products related to information security. Gives you access to
|
||
a broad range of UI patterns, UI components, design tools, resources,
|
||
and content guidelines to accelerate collaboration.</li>
|
||
<li><a href="https://vega.hlprd.com/">Vega</a> - Vega includes reusable
|
||
components and styles, in your framework of choice. Build product
|
||
features faster, without recreating the same basic components for every
|
||
project.</li>
|
||
<li><a href="https://blueprintui.dev/">Blueprint UI</a> - Accelerate
|
||
your development with flexible UI components and tools that work
|
||
everywhere.</li>
|
||
<li><a href="https://github.com/jean-merelis/angular-components"><span
|
||
class="citation"
|
||
data-cites="jean-merelis/angular-components">@jean-merelis/angular-components</span></a>
|
||
- A library of reusable Angular components and utilities that provides
|
||
high-quality UI elements for your applications.</li>
|
||
<li><a href="https://github.com/KY-Programming/mantic-ui">mantic-ui</a>
|
||
- Angular components for <a href="https://semantic-ui.com/">Semantic
|
||
UI</a> and <a href="https://fomantic-ui.com/">Fomantic UI</a>.</li>
|
||
<li><a href="https://github.com/sanjib-kumar-mandal/kage-ui">kage-ui</a>
|
||
- A lightweight, flexible Angular component library inspired by
|
||
border-first design systems. It offers a clean set of reusable UI
|
||
components to help developers build scalable and consistent user
|
||
interfaces effortlessly.</li>
|
||
</ul>
|
||
<h5 id="material-based">Material Based</h5>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/mdbootstrap/mdb-angular-ui-kit">MDBootstrap</a>
|
||
- Bootstrap 5 & Angular 17 UI KIT - 700+ components, MIT license,
|
||
simple installation.</li>
|
||
<li><a href="https://material.angular.io/">Angular Material</a> -
|
||
Material Design components for Angular.</li>
|
||
<li><a href="https://github.com/Teradata/covalent/">Covalent</a> -
|
||
Teradata UI Platform built on Angular Material.</li>
|
||
<li><a href="https://github.com/IgniteUI/igniteui-angular">IgniteUI
|
||
Angular</a> - Ignite UI for Angular is a complete library of
|
||
Angular-native, Material-based Angular UI components with the fastest
|
||
grids, charts, and more.</li>
|
||
<li><a href="https://github.com/A-l-y-l-e/Alyle-UI">Alyle UI</a> -
|
||
Minimal Design, a set of components for Angular 16+.</li>
|
||
<li><a href="https://www.jqwidgets.com/angular/">angular-jqwidgets</a> -
|
||
Advanced Angular Components with Material Design.</li>
|
||
<li><a href="https://github.com/ng-matero/extensions"><span
|
||
class="citation"
|
||
data-cites="ng-matero/extensions">@ng-matero/extensions</span></a> -
|
||
Angular Material Extensions Library.</li>
|
||
<li><a
|
||
href="https://github.com/johannesjo/angular-material-css-vars">angular-material-css-vars</a>
|
||
- Little library to use CSS variables with Angular Material.</li>
|
||
<li><a
|
||
href="https://github.com/DSI-HUG/ngx-components">ngx-components</a> -
|
||
Useful components and utility functions for Angular.</li>
|
||
<li><a
|
||
href="https://github.com/Service-Soft/ngx-material-auth">ngx-material-auth</a>
|
||
- A library for Angular which provides functionality around the frontend
|
||
part of authentication and authorization.</li>
|
||
<li><a
|
||
href="https://github.com/Service-Soft/ngx-material-navigation">ngx-material-navigation</a>
|
||
- Builds material navigation elements like a combined navbar and sidenav
|
||
or footers based on the supplied configuration data. Will automatically
|
||
move elements from the navbar to the sidenav at the provided
|
||
breakpoints.</li>
|
||
<li><a
|
||
href="https://github.com/Service-Soft/ngx-material-entity">ngx-material-entity</a>
|
||
- With <code>NgxMaterialEntity</code> you can create entities and define
|
||
how to display them directly on their properties. It can even generate
|
||
complete and highly customizable CRUD-Tables.</li>
|
||
<li><a
|
||
href="https://github.com/jxcodes/ngx-core-business">ngx-core-business</a>
|
||
- An Angular library in active development, built on top of
|
||
<code>@angular/material</code>. It aims to provide reusable,
|
||
enterprise-grade UI components and utilities to streamline the
|
||
development of scalable Angular applications.</li>
|
||
<li><a
|
||
href="https://github.com/c3ulnta0rk/c3-components">c3-components</a> -
|
||
An open-source component library that extends the
|
||
<code>@angular/material</code> library.</li>
|
||
<li><a
|
||
href="https://github.com/wobkenh/simplematcomponents">simplematcomponents</a>
|
||
- Set of Angular components that fit into or use Angular Material
|
||
Design.</li>
|
||
<li><a href="https://ui.angular-material.dev/home">Angular Material Dev
|
||
UI</a> - 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.</li>
|
||
</ul>
|
||
<h5 id="bootstrap-based">Bootstrap Based</h5>
|
||
<ul>
|
||
<li><a
|
||
href="https://mdbootstrap.com/docs/angular/">angular-bootstrap-md</a> -
|
||
Material Design for Bootstrap 5 & Angular 17.</li>
|
||
<li><a href="https://ng-bootstrap.github.io">ng-bootstrap</a> - Angular
|
||
widgets built from the ground up using only Bootstrap 5 CSS with APIs
|
||
designed for the Angular ecosystem.</li>
|
||
<li><a
|
||
href="https://github.com/valor-software/ngx-bootstrap">ngx-bootstrap</a>
|
||
- Fast and reliable Bootstrap widgets in Angular (supports Ivy
|
||
engine).</li>
|
||
<li><a
|
||
href="https://github.com/italia/design-angular-kit">design-angular-kit</a>
|
||
- A toolkit based on Bootstrap Italia for the creation of web
|
||
applications developed with Angular.</li>
|
||
<li><a
|
||
href="https://github.com/dotted-labs/ngx-bootstrap-components">ngx-bootstrap-components</a>
|
||
- This library provides a set of Angular components integrated with
|
||
Bootstrap, designed to be used with Angular’s latest features like
|
||
signals and the OnPush change detection strategy. The components are
|
||
standalone, meaning they can be imported directly without the need for
|
||
an encompassing Angular module.</li>
|
||
<li><a href="https://www.yoozsoft.com/ys-ng/home">yoozsoft</a> - Widgets
|
||
built using Bootstrap 5, CSS, and NG Bootstrap 17 with APIs designed for
|
||
the Angular ecosystem.</li>
|
||
<li><a href="https://www.npmjs.com/package/ngx-gccb">ngx-gccb</a> -
|
||
Angular 19+ component library providing ease of use shared components,
|
||
directives, pipes and services. Check this <a
|
||
href="https://ngx-gccb.netlify.app/">showcase</a> for code
|
||
snippets.</li>
|
||
<li><a href="https://elementarui.com/">Elementar UI</a> - Fully
|
||
open-source Angular UI Components & Admin Panel based on Material 3
|
||
and Tailwind.</li>
|
||
<li><a href="https://github.com/pSkywalker/ez-nav">ez-nav</a> - A
|
||
config-driven, responsive Angular navigation bar that integrates
|
||
seamlessly with Bootstrap layouts.</li>
|
||
</ul>
|
||
<h5 id="tailwind-css-based">Tailwind CSS Based</h5>
|
||
<ul>
|
||
<li><a
|
||
href="https://flowbite.com/docs/getting-started/angular/">Flowbite</a> -
|
||
Open-source UI components built with Tailwind CSS with support for
|
||
Angular.</li>
|
||
<li><a href="https://tailkit.com/">Tailkit UI</a> - Carefully crafted,
|
||
easy to customize, fully responsive Tailwind CSS Components, Templates
|
||
and Tools for your Tailwind CSS based projects.</li>
|
||
<li><a
|
||
href="https://preline.co/docs/frameworks-angular.html#docs-on-this-page-sidebar">Preline
|
||
UI</a> - <a
|
||
href="https://github.com/htmlstreamofficial/preline">Preline</a> is an
|
||
open-source set of prebuilt UI components based on the utility-first
|
||
Tailwind CSS framework.</li>
|
||
<li><a href="https://github.com/william-mba/tailwind-ng">tailwind-ng</a>
|
||
- An open source UI components library that aims to provide a seamless
|
||
and robust integration of Tailwind CSS components with Angular to make
|
||
building a great UI easier and joyful at any scale.</li>
|
||
<li><a
|
||
href="https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/angular">Metronic</a>
|
||
- A comprehensive toolkit of UI components built with Tailwind CSS,
|
||
enabling you to create modern, scalable web applications quickly and
|
||
efficiently.</li>
|
||
<li><a href="https://github.com/jarretthuang/rectangle-ui">Rectangle
|
||
UI</a> - A code-first UI component library for Angular.</li>
|
||
<li><a href="https://github.com/themeselection/flyonui">FlyonUI</a> - <a
|
||
href="https://flyonui.com/framework-integrations/angular/">Integrate</a>
|
||
FlyonUI with Angular and Tailwind CSS to create a modern, responsive UI,
|
||
streamlining your development process efficiently.</li>
|
||
<li><a href="https://github.com/zapuilib/zapui">zapui</a> - Build sleek,
|
||
scalable, and cohesive Angular applications effortlessly with a
|
||
Tailwind-powered design system from <a
|
||
href="https://zapui.togethercreative.co.uk/">zap:ui</a>.</li>
|
||
<li><a
|
||
href="https://github.com/quedicesebas/angular-tailwind-ui">angular-tailwind-ui</a>
|
||
- Easy to use and simple components, directives and services. Using
|
||
Angular 19 and Tailwind CSS 3.</li>
|
||
<li><a href="https://github.com/dofu-lab/simui">simui</a> - Beautiful
|
||
Angular UI components built with Tailwind CSS and Spartan.</li>
|
||
<li><a href="https://github.com/Seacotec/seacotools">seacotools</a> - A
|
||
library designed for modern Angular applications, offering a suite of
|
||
reusable UI components and services compatible with Tailwind CSS.</li>
|
||
<li><a href="https://ng.nicacoder.com/">nicacoder-ng</a> - A centralized
|
||
library of customizable Angular components designed to speed up
|
||
development and maintain consistency across internal projects.</li>
|
||
</ul>
|
||
<h5 id="node-based">Node Based</h5>
|
||
<ul>
|
||
<li><a href="https://github.com/artem-mangilev/ngx-vflow">ngx-vflow</a>
|
||
- An open source library to build node-based UI with Angular.</li>
|
||
</ul>
|
||
<h5 id="primitives">Primitives</h5>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/ng-primitives/ng-primitives">ng-primitives</a>
|
||
- A low-level UI component library with a focus on accessibility,
|
||
customization, and developer experience.</li>
|
||
<li><a href="https://github.com/radix-ng/primitives">primitives</a> -
|
||
Angular port of <a href="https://www.radix-ui.com/">Radix UI</a>
|
||
Primitives. Accessible. Customizable.</li>
|
||
<li><a href="https://github.com/ng-base/ngbase">ngbase</a> - A
|
||
lightweight, flexible UI primitives library for Angular. It provides
|
||
unstyled foundational Directives and components that developers can
|
||
customize to match their design systems.</li>
|
||
<li><a href="https://github.com/DanielAlcaraz/vacui-ui">vacui-ui</a> - A
|
||
headless Angular library of utility-first, primitives, low-level
|
||
directives as foundational elements.</li>
|
||
<li><a
|
||
href="https://github.com/fawadtariq/ngx-headless">ngx-headless</a> - A
|
||
collection of Headless Libraries for Angular — fully standalone,
|
||
accessible, and style-agnostic primitives inspired by <a
|
||
href="https://headlessui.com">Headless UI</a> & <a
|
||
href="https://formkit.com">FormKit</a>.</li>
|
||
</ul>
|
||
<h4 id="ux-components">UX Components</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/shepherd-pro/angular-shepherd">angular-shepherd</a>
|
||
- Angular Service wrapping the site tour library <a
|
||
href="https://github.com/shepherd-pro/shepherd">Shepherd</a>.</li>
|
||
<li><a href="https://github.com/blackbaud/skyux">skyux</a> - SKY UX
|
||
components for Angular.</li>
|
||
<li><a href="https://github.com/hakimio/ngx-ui-tour">ngx-ui-tour</a> - A
|
||
UI tour library inspired by <a
|
||
href="https://github.com/benmarch/angular-ui-tour">angular-ui-tour</a>.</li>
|
||
<li><a
|
||
href="https://github.com/tonysamperi/ngx-tour-wizard">ngx-tour-wizard</a>
|
||
- Product Tour Wizard.</li>
|
||
<li><a
|
||
href="https://github.com/Broadcom/bdc-walkthrough">bdc-walkthrough</a> -
|
||
An Angular Material library for displaying walk-through pop-ups and
|
||
dialogs using a declarative way.</li>
|
||
<li><a
|
||
href="https://github.com/rosen-group/ngx-onboarding">ngx-onboarding</a>
|
||
- This onboarding library enables you to integrate a tutorial seamlessly
|
||
into your Angular application. This helps users to quickly and easily
|
||
learn how to navigate and use your app, reducing the learning
|
||
curve.</li>
|
||
</ul>
|
||
<h4 id="viewers">Viewers</h4>
|
||
<ul>
|
||
<li><a href="https://github.com/ameyb88/file-viewer">file-viewer</a> - A
|
||
powerful, universal file previewer library for Angular applications with
|
||
support for PDF, images, documents, spreadsheets, and more.</li>
|
||
<li><a
|
||
href="https://github.com/askinjohn/ng-pdf-renderer">ng-pdf-renderer</a>
|
||
- A modern, zero-configuration PDF viewer for Angular applications with
|
||
intelligent auto-fit, text selection, and responsive design.</li>
|
||
<li><a
|
||
href="https://github.com/VadimDez/ng2-pdf-viewer">ng2-pdf-viewer</a> -
|
||
PDF viewer component.</li>
|
||
<li><a
|
||
href="https://github.com/intbot/ng2-pdfjs-viewer">ng2-pdfjs-viewer</a> -
|
||
An Angular component for PDFJS and ViewerJS (Supports all versions of
|
||
Angular).</li>
|
||
<li><a href="https://github.com/rars/ngx-diff">ngx-diff</a> - Angular
|
||
component library for displaying diffs of text.</li>
|
||
<li><a
|
||
href="https://github.com/stephanrauh/ngx-extended-pdf-viewer">ngx-extended-pdf-viewer</a>
|
||
- A full-blown PDF viewer for Angular 16, 17, and beyond.</li>
|
||
<li><a href="https://github.com/ProAngular/ngx-gist">ngx-gist</a> - An
|
||
Angular Material and highlightjs styled display box for GitHub gist and
|
||
local code snippets.</li>
|
||
<li><a
|
||
href="https://github.com/viobui/ngx-imageviewer">ngx-imageviewer</a> -
|
||
Generate a image/pdf viewer using canvas.</li>
|
||
<li><a
|
||
href="https://www.npmjs.com/package/ngx-json-diff-viewer">ngx-json-diff-viewer</a>
|
||
- Angular component for visually displaying the differences between two
|
||
JSON objects.</li>
|
||
<li><a
|
||
href="https://github.com/jy95/ngx-json-schema-viewer">ngx-json-schema-viewer</a>
|
||
- JSON Schema Viewer in Angular.</li>
|
||
<li><a
|
||
href="https://github.com/MichaelDoyle/ngx-json-treeview">ngx-json-treeview</a>
|
||
- A collapsible JSON tree view for Angular.</li>
|
||
<li><a href="https://github.com/TapBeep/ngx-treeview2">ngx-treeview2</a>
|
||
- An Angular treeview component with checkbox.</li>
|
||
</ul>
|
||
<h4 id="misc-components">Misc Components</h4>
|
||
<ul>
|
||
<li><a href="https://github.com/cipchk/ngx-countdown">ngx-countdown</a>
|
||
- Simple, easy and performant countdown.</li>
|
||
<li><a href="https://www.npmjs.com/package/ng-lock">ng-lock</a> -
|
||
Angular decorator for lock a function and user interface while a task
|
||
running.</li>
|
||
<li><a
|
||
href="https://github.com/jscutlery/devkit/tree/main/packages/rx-computed">rx-computed</a>
|
||
- The async RxJS-based version of signals’ <code>computed()</code>.</li>
|
||
<li><a
|
||
href="https://github.com/jscutlery/devkit/tree/main/packages/microwave">microwave</a>
|
||
- Optimize Angular change detection effortlessly.</li>
|
||
<li><a
|
||
href="https://github.com/AhsanAyaz/ngx-device-detector">ngx-device-detector</a>
|
||
- An Angular v7+ library to detect the device, OS, and browser
|
||
details.</li>
|
||
<li><a
|
||
href="https://github.com/taiga-family/ng-polymorpheus">ng-polymorpheus</a>
|
||
- Polymorpheus is a tiny library for polymorphic templates in
|
||
Angular.</li>
|
||
<li><a href="https://github.com/acrodata/gui">gui</a> - JSON powered GUI
|
||
for configurable panels.</li>
|
||
<li><a
|
||
href="https://github.com/d-koppenhagen/angular-tag-cloud-module">angular-tag-cloud-module</a>
|
||
- With this module, you can generate word clouds / tag clouds.</li>
|
||
<li><a
|
||
href="https://github.com/DerStimmler/ngx-parallax-stars">ngx-parallax-stars</a>
|
||
- Angular library to create beautiful stars with parallax effect.</li>
|
||
<li><a
|
||
href="https://github.com/mustafaer/angular-twitter-timeline">angular-twitter-timeline</a>
|
||
- Angular Public Twitter Timeline Widget.</li>
|
||
<li><a
|
||
href="https://github.com/angular-experts-io/ng-parsel">ng-parsel</a> -
|
||
Parse your Angular code base to JSON abstraction - Great for displaying
|
||
APIs and running custom analysis.</li>
|
||
<li><a
|
||
href="https://github.com/sibiraj-s/angular-paginator">angular-paginator</a>
|
||
- Pagination Component for Angular applications.</li>
|
||
<li><a
|
||
href="https://github.com/mgechev/ngx-flamegraph">ngx-flamegraph</a> -
|
||
Flame graph for stack trace visualization written in Angular.</li>
|
||
<li><a
|
||
href="https://github.com/JeanMeche/angular-compiler-output">angular-compiler-output</a>
|
||
- See the JS output of the Angular compiler for a given Angular
|
||
template.</li>
|
||
<li><a
|
||
href="https://github.com/zefoy/ngx-font-picker">ngx-font-picker</a> -
|
||
Google fonts font picker widget for Angular.</li>
|
||
<li><a href="https://github.com/moribvndvs/ng2-idle">ng2-idle</a> - A
|
||
module for responding to idle users in Angular applications.</li>
|
||
<li><a
|
||
href="https://github.com/lazycuh/angular-confirmation-capture">angular-confirmation-capture</a>
|
||
- A singleton, global Angular service to programmatically show a
|
||
confirmation box to capture an user’s consent.</li>
|
||
<li><a
|
||
href="https://github.com/lazycuh/angular-anchored-floating-box">angular-anchored-floating-box</a>
|
||
- A singleton, global Angular service to programmatically render a
|
||
floating box anchored at an element that can have arbitrary content
|
||
specified by either a TemplateRef or component.</li>
|
||
<li><a href="https://github.com/ashish-chopra/ngx-gauge">ngx-gauge</a> -
|
||
A highly customizable Gauge component for Angular apps and
|
||
dashboards.</li>
|
||
<li><a
|
||
href="https://github.com/omnedia/ngx-neon-underline">ngx-neon-underline</a>
|
||
- An Angular library that provides a glowing neon underline effect for
|
||
your components.</li>
|
||
<li><a href="https://github.com/omnedia/ngx-lamp">ngx-lamp</a> - A
|
||
simple component library to create a lamp.</li>
|
||
<li><a href="https://github.com/omnedia/ngx-globe">ngx-globe</a> - A
|
||
simple component library to create a container with an animated
|
||
globe.</li>
|
||
<li><a href="https://github.com/JsDaddy/ngx-copypaste">ngx-copypaste</a>
|
||
- A pure and awesome copy paste directive for Angular.</li>
|
||
<li><a href="https://github.com/monkeyscript/ngx-morse">ngx-morse</a> -
|
||
A simple morse code encoder and decoder for Angular.</li>
|
||
<li><a
|
||
href="https://github.com/mostafazke/ng-whiteboard">ng-whiteboard</a> -
|
||
Lightweight Angular whiteboard component.</li>
|
||
<li><a
|
||
href="https://github.com/andrei-shpileuski/ngs-json-utils">ngs-json-utils</a>
|
||
- A lightweight utility library for Angular applications that provides
|
||
easy-to-use functions for working with JSON objects. It includes methods
|
||
for deep cloning, serialization, and deserialization of JSON data,
|
||
designed specifically for Angular projects with TypeScript support.</li>
|
||
<li><a
|
||
href="https://github.com/Service-Soft/lbx-change-sets">lbx-change-sets</a>
|
||
- This package helps you to track changes made on your entities
|
||
automatically using a base repository class to extend from.</li>
|
||
<li><a
|
||
href="https://github.com/akbarsaputrait/ngememoize">ngememoize</a> -
|
||
Easily boost the performance of your Angular applications by memoizing
|
||
functions and getters with this lightweight and simple-to-use
|
||
library.</li>
|
||
<li><a href="https://github.com/wadie/ngx-gooey">ngx-gooey</a> - The
|
||
gooey effect for Angular, used for shape blobbing / metaballs.</li>
|
||
<li><a
|
||
href="https://github.com/patrikx3/angular-compile">angular-compile</a> -
|
||
Angular Dynamic Compile. Convert strings to Angular components.</li>
|
||
<li><a
|
||
href="https://github.com/gonzalad/ngx-error-handling">ngx-error-handling</a>
|
||
- This library seamlessly manages unhandled RxJS, signal, and classic
|
||
errors, making them accessible through an Rx subject (ErrorBus).</li>
|
||
<li><a
|
||
href="https://www.npmjs.com/package/ngx-signal-hub">ngx-signal-hub</a> -
|
||
A lightweight, reactive signal hub service for Angular applications
|
||
built using signals. It offers a hybrid approach, allowing both
|
||
traditional callback-based subscriptions and efficient signal-based
|
||
observation of the latest event state.</li>
|
||
<li><a href="https://github.com/mschn/ngx-voyage">ngx-voyage</a> - File
|
||
Explorer for Angular and PrimeNG.</li>
|
||
<li><a
|
||
href="https://github.com/thdang1009/ngx-offline-indicator">ngx-offline-indicator</a>
|
||
- A library designed to provide developers with a simple and
|
||
customizable way to inform users about their internet connection status
|
||
within their Angular applications.</li>
|
||
<li><a
|
||
href="https://www.npmjs.com/package/ngx-network-status">ngx-network-status</a>
|
||
- A lightweight Angular library to detect actual internet connectivity
|
||
by pinging a backend endpoint — not just relying on
|
||
<code>navigator.onLine</code>.</li>
|
||
<li><a
|
||
href="https://github.com/maitrungduc1410/d3-cloud-angular">d3-cloud-angular</a>
|
||
- D3 Cloud component for Angular built upon <a
|
||
href="https://github.com/jasondavies/d3-cloud">d3-cloud</a>.</li>
|
||
<li><a
|
||
href="https://github.com/djonnyx/ng-virtual-list">ng-virtual-list</a> -
|
||
Maximum performance for extremely large lists. It is based on algorithms
|
||
for virtualization of screen objects.</li>
|
||
</ul>
|
||
<hr />
|
||
<h4 id="ionic">Ionic</h4>
|
||
<blockquote>
|
||
<p>Ionic is the beautiful, open source front-end SDK for developing
|
||
hybrid mobile apps with web technologies.</p>
|
||
</blockquote>
|
||
<ul>
|
||
<li><a href="https://ionicframework.com">Official website</a></li>
|
||
<li><a href="https://github.com/ionic-team/ionic-framework">Official
|
||
GitHub repository</a></li>
|
||
<li><a href="https://ionicacademy.com/">Ionic Academy</a> - The fastest
|
||
way to learn Ionic.</li>
|
||
<li><a href="https://eliteionic.com/">Elite Ionic</a> - Advanced
|
||
training for Angular developers who want to create NEXT LEVEL native web
|
||
applications.</li>
|
||
<li><a href="https://ionicthemes.com/tutorials">Ionic Themes</a> -
|
||
Tutorials and templates.</li>
|
||
<li><a href="https://ionicstart.com/">Ionic Start</a> - Build web and
|
||
native mobile applications with Ionic whilst learning modern reactive
|
||
development with Angular.</li>
|
||
<li><a
|
||
href="https://github.com/danielsogl/awesome-cordova-plugins">awesome-cordova-plugins</a>
|
||
- Native features for mobile apps built with Cordova/PhoneGap and open
|
||
web technologies. Complete with TypeScript support.</li>
|
||
<li><a
|
||
href="https://github.com/rdlabo-team/ionic-angular-library">ionic-angular-library</a>
|
||
- A collection of components and services that are useful for developing
|
||
Ionic Angular applications.</li>
|
||
<li><a
|
||
href="https://github.com/rdlabo-team/ionic-angular-collect-icons">ionic-angular-collect-icons</a>
|
||
- This library is used to uniquely group the ionIcons in a project, and
|
||
generate for export ionIcons file. In small projects, it is difficult to
|
||
manage addIcons() of ionIcons each time, so we automated it.</li>
|
||
<li><a
|
||
href="https://github.com/iter-idea/IDEA-Ionic8-extra">IDEA-Ionic8-extra</a>
|
||
- <a href="https://www.iter-idea.com/">IDEA’s</a> extra components and
|
||
services built on Ionic 8, and distributed with different NPM
|
||
packages.</li>
|
||
<li><a
|
||
href="https://github.com/LennonReid/ionic-component-snippets">ionic-component-snippets</a>
|
||
- This repository showcases demos and libraries that aren’t officially
|
||
supported by Ionic yet, but can be useful for developers and their
|
||
apps.</li>
|
||
<li><a
|
||
href="https://github.com/RaschidJFR/ionic-header-parallax">ionic-header-parallax</a>
|
||
- This directive enables a parallax effect on <code>ion-header</code>
|
||
elements to display a cover photo while on top of the page and
|
||
transition to the normal toolbar when scrolling down.</li>
|
||
<li><a href="https://github.com/godenji/ionic-state">ionic-state</a> -
|
||
Provides utilities for working with state in Ionic applications.</li>
|
||
<li><a
|
||
href="https://www.npmjs.com/package/simplici-auth-angular-ionic">simplici-auth-angular-ionic</a>
|
||
- A powerful Angular library designed to seamlessly integrate social
|
||
authentication into your Ionic/Angular applications. It supports a wide
|
||
range of providers including Google, Microsoft, Facebook, and Apple,
|
||
with optimized compatibility for both web and native mobile platforms
|
||
(iOS/Android) using Capacitor or Cordova.</li>
|
||
</ul>
|
||
<h4 id="rxjs">RxJS</h4>
|
||
<ul>
|
||
<li><a href="https://rxjs.dev/">Official website</a> - Reactive
|
||
Extensions Library for JavaScript.</li>
|
||
<li><a href="https://github.com/btroncone/learn-rxjs">learn-rxjs</a> -
|
||
Clear examples, explanations, and resources for RxJS.</li>
|
||
<li><a
|
||
href="https://github.com/angular-university/rxjs-course">rxjs-course</a>
|
||
- RxJS course from Angular University</li>
|
||
<li><a href="https://github.com/mrOranger/RxJs"><span class="citation"
|
||
data-cites="mrOranger/RxJs">@mrOranger/RxJs</span></a> - Theory with
|
||
examples about the Reactive Programming paradigm, using the library
|
||
RxJS.</li>
|
||
<li><a
|
||
href="https://github.com/redux-observable/redux-observable">redux-observable</a>
|
||
- RxJS middleware for action side effects in Redux using “Epics”.</li>
|
||
<li><a
|
||
href="https://github.com/AngularWave/rxjs-challenge">rxjs-challenge</a>
|
||
- A set of little RxJS puzzles to practice your Observable skills.</li>
|
||
<li><a
|
||
href="https://github.com/jscutlery/devkit/tree/main/packages/operators">operators</a>
|
||
- This package regroups a couple of RxJS operators meant to simplify
|
||
some common patterns.</li>
|
||
<li><a href="https://github.com/ngneat/until-destroy">until-destroy</a>
|
||
- RxJS operator that unsubscribe from observables on destroy.</li>
|
||
<li><a href="https://github.com/ngneat/effects">effects</a> - A
|
||
framework-agnostic RxJS effects implementation.</li>
|
||
<li><a
|
||
href="https://github.com/cloudnc/ngx-observable-lifecycle">ngx-observable-lifecycle</a>
|
||
- Library for observing the lifecycle of an (Ivy compiled) Angular
|
||
component.</li>
|
||
<li><a
|
||
href="https://github.com/nilsmehlhorn/ngx-operators">ngx-operators</a> -
|
||
RxJS operators for Angular.</li>
|
||
<li><a
|
||
href="https://github.com/chrisguttandin/subscribable-things">subscribable-things</a>
|
||
- A collection of reactive wrappers for various browser APIs.</li>
|
||
<li><a
|
||
href="https://github.com/ftischler/ngx-rxjs-zone-scheduler">ngx-rxjs-zone-scheduler</a>
|
||
- A library for Angular providing RxJS schedulers to run some kind of
|
||
work inside or outside of <code>NgZone</code>.</li>
|
||
<li><a
|
||
href="https://github.com/chrisguttandin/rxjs-broker">rxjs-broker</a> -
|
||
An RxJS message broker for WebRTC DataChannels and WebSockets.</li>
|
||
<li><a
|
||
href="https://github.com/cloudnc/observable-webworker">observable-webworker</a>
|
||
- Simplified API for working with Web Workers with RxJS.</li>
|
||
<li><a
|
||
href="https://github.com/cristiammercado/ng-event-bus">ng-event-bus</a>
|
||
- RxJS-based message bus service for Angular.</li>
|
||
<li><a
|
||
href="https://github.com/omnedia/rxjs-typewriter">rxjs-typewriter</a> -
|
||
A lightweight and easy-to-use NPM library for creating typewriter
|
||
effects in your web applications. It uses RxJS to manage the typewriting
|
||
effect, ensuring smooth and customizable animations.</li>
|
||
<li><a
|
||
href="https://github.com/Badisi/ngx-safe-subscribe">ngx-safe-subscribe</a>
|
||
- Easy way to automatically unsubscribe from RxJS observables in Angular
|
||
components.</li>
|
||
<li><a
|
||
href="https://github.com/henryruhs/rxjs-collection">rxjs-collection</a>
|
||
- RxJS enhanced Array, Map, WeakMap, Set and WeakSet.</li>
|
||
<li><a
|
||
href="https://github.com/piotrekn/ng-rxjs-safe-subscribe">ng-rxjs-safe-subscribe</a>
|
||
- Implementation of Angular’s repeatable OnDestroy pattern.</li>
|
||
<li><a href="https://rxvisualizer.com/">rxvisualizer</a> - RxJS Marble
|
||
Diagram Visualizer from <a href="https://www.angularspace.com/">Angular
|
||
Space</a>.</li>
|
||
<li><a
|
||
href="https://github.com/JasonWeinzierl/eslint-plugin-rxjs-x">eslint-plugin-rxjs-x</a>
|
||
- A fork of <a
|
||
href="https://github.com/cartant/eslint-plugin-rxjs">eslint-plugin-rxjs</a>
|
||
initially started to support the new ESLint flat config format that has
|
||
since had numerous breaking changes and further improvements.</li>
|
||
<li><a href="https://github.com/paddls/rxjs-common">rxjs-common</a> - A
|
||
collection of useful RxJS operators.</li>
|
||
<li><a
|
||
href="https://github.com/DKozachenko/fork-join-settled">fork-join-settled</a>
|
||
- RxJS library which is analog of <a
|
||
href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled">Promise.allSettled()</a>
|
||
method.</li>
|
||
<li><a href="https://github.com/Fasteroid/rxjs-conduit">rxjs-conduit</a>
|
||
- RxJS ReplaySubjects with with additional features to make reactive
|
||
programming easier.</li>
|
||
<li><a
|
||
href="https://github.com/PhilipSh/ngx-device-permission">ngx-device-permission</a>
|
||
- Angular library for handling device permissions (camera, microphone,
|
||
geolocation, etc.) in a reactive way using RxJS.</li>
|
||
</ul>
|
||
<h4 id="typescript">TypeScript</h4>
|
||
<ul>
|
||
<li><a href="https://www.typescriptlang.org/">Official Website</a></li>
|
||
<li><a href="https://www.typescriptlang.org/play/">Official TypeScript
|
||
REPL</a></li>
|
||
<li><a href="https://github.com/Microsoft/TypeScript">Official GitHub
|
||
repository</a></li>
|
||
<li><a
|
||
href="https://github.com/DefinitelyTyped/DefinitelyTyped">DefinitelyTyped
|
||
GitHub repository</a> - The repository for high quality TypeScript type
|
||
definitions.</li>
|
||
<li><a href="https://github.com/typehero/typehero">typehero</a> -
|
||
Connect, collaborate, and grow with a community of TypeScript
|
||
developers.</li>
|
||
<li><a
|
||
href="https://github.com/type-challenges/type-challenges">type-challenges</a>
|
||
- Collection of TypeScript type challenges with online judge.</li>
|
||
<li><a
|
||
href="https://github.com/psmyrdek/typescript-challenges">typescript-challenges</a>
|
||
- A set of challenges helping you understand TypeScript.</li>
|
||
<li><a href="https://github.com/softarc-consulting/sheriff">Sheriff</a>
|
||
- Lightweight Modularity for TypeScript Projects.</li>
|
||
<li><a
|
||
href="https://github.com/total-typescript/total-typescript-book">Total
|
||
Typescript Book</a> - The companion repository for the upcoming Total
|
||
TypeScript book.</li>
|
||
<li><a
|
||
href="https://github.com/ts-essentials/ts-essentials">ts-essentials</a>
|
||
- All essential TypeScript types in one place.</li>
|
||
<li><a href="https://github.com/trpc/trpc">trpc</a> - Move Fast and
|
||
Break Nothing. End-to-end typesafe APIs made easy.</li>
|
||
<li><a href="https://github.com/glideapps/quicktype">quicktype</a> -
|
||
Generate types and converters from JSON, Schema, and GraphQL.</li>
|
||
<li><a href="https://github.com/gvergnaud/ts-pattern">ts-pattern</a> -
|
||
The exhaustive Pattern Matching library for TypeScript, with smart type
|
||
inference.</li>
|
||
<li><a href="https://github.com/iamguid/ngx-mf">ngx-mf</a> - Bind your
|
||
model types to Angular FormGroup type.</li>
|
||
<li><a
|
||
href="https://github.com/ianstormtaylor/superstruct">superstruct</a> - A
|
||
simple and composable way to validate data in JavaScript (and
|
||
TypeScript).</li>
|
||
<li><a href="https://github.com/sinclairzx81/typebox">typebox</a> - Json
|
||
Schema Type Builder with Static Type Resolution for TypeScript.</li>
|
||
<li><a href="https://github.com/colinhacks/zod">zod</a> -
|
||
TypeScript-first schema validation with static type inference.</li>
|
||
<li><a href="https://github.com/fabian-hiller/valibot">valibot</a> - The
|
||
modular and type safe schema library for validating structural
|
||
data.</li>
|
||
<li><a
|
||
href="https://github.com/soc221b/ngx-exhaustive-check">ngx-exhaustive-check</a>
|
||
- Angular utility for ensuring exhaustive checks on TypeScript
|
||
discriminated unions, enhancing type safety and reliability.</li>
|
||
<li><a href="https://github.com/IKatsuba/mutates">mutates</a> - A
|
||
powerful toolset for mutating the Abstract Syntax Tree (AST) of
|
||
TypeScript files. It is a fork of <a
|
||
href="https://github.com/taiga-family/ng-morph">ng-morph</a>, with a
|
||
broader focus beyond Angular-specific transformations, allowing for
|
||
extensive AST modifications in any TypeScript project.</li>
|
||
<li><a href="https://github.com/sindresorhus/type-fest">type-fest</a> -
|
||
A collection of essential TypeScript types. Either add the package as a
|
||
dependency or copy-paste the needed types.</li>
|
||
<li><a href="https://github.com/paddls/ts-serializer">ts-serializer</a>
|
||
- Serialize your models into strongly typed Typescript classes.</li>
|
||
<li><a href="https://github.com/smartrecruiters/tsconfig">tsconfig</a> -
|
||
SmartRecruiters’ tsconfig contains all strict rules and improves your
|
||
project type-safety.</li>
|
||
<li><a
|
||
href="https://transform.tools/json-to-typescript">transform.tools</a> -
|
||
Save a lot of time typing API responses with this JSON to TypeScript
|
||
converter.</li>
|
||
<li><a href="https://github.com/typed-rocks/type-buddy">typebuddy</a> -
|
||
Finally make sense of your complex types.</li>
|
||
</ul>
|
||
<h4 id="inspired-by-angular">Inspired by Angular</h4>
|
||
<blockquote>
|
||
<p>These repositories showcase a variety of projects and tools inspired
|
||
by Angular, demonstrating how its foundational concepts can drive
|
||
innovative and adaptable solutions across diverse applications.</p>
|
||
</blockquote>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/emmat-york/angular-style-injector">angular-style-injector</a>
|
||
- A lightweight dependency injection container inspired by Angular’s
|
||
Injector.</li>
|
||
<li><a href="https://www.npmjs.com/package/arky-js">arky-js</a> - A
|
||
powerful, annotation-based framework for building serverless
|
||
applications on AWS Lambda and API Gateway. Inspired by Angular and
|
||
NestJS, Arky.js simplifies serverless development by providing
|
||
decorators for defining modules, controllers, and services.</li>
|
||
<li><a href="https://github.com/philmtd/css-fx-layout">css-fx-layout</a>
|
||
- A responsive SCSS flexbox library inspired by Angular <a
|
||
href="https://github.com/angular/flex-layout">Flex-Layout</a>.</li>
|
||
<li><a href="https://github.com/kaokei/di">di</a> - This library is a
|
||
lightweight dependency injection library, similar to <a
|
||
href="https://github.com/inversify/InversifyJS">InversifyJS</a> and <a
|
||
href="https://github.com/typestack/typedi">typedi</a>.</li>
|
||
<li><a href="https://github.com/AndreyShashlovDev/flexdi">flexdi</a> - A
|
||
flexible, efficient, and lightweight dependency injection library for
|
||
React / React Native / Vue3 applications. The library is inspired by the
|
||
principles and architectural approach of NestJS and Angular.</li>
|
||
<li><a href="https://github.com/TBosak/fornax">fornax</a> - A
|
||
lightweight, opinionated, and highly customizable Bun-powered full-stack
|
||
web framework designed to simplify building single-page applications
|
||
with custom components, routing, and flexible styling options.</li>
|
||
<li><a href="https://github.com/AlexSergey/friendly-di">friendly-di</a>
|
||
- A lightweight and high-performance inversion of control (IoC)
|
||
container inspired by NestJS and Angular.</li>
|
||
<li><a href="https://github.com/gandolphinnn/GameEngine">GameEngine</a>
|
||
- A Typescript game engine inspired by Angular.</li>
|
||
<li><a href="https://github.com/Stradivario/gapi">gapi</a> - Inspired by
|
||
Angular and intended to provide complex NodeJS GraphQL Backend
|
||
applications with minimum effort.</li>
|
||
<li><a href="https://github.com/garag-lib/GTPL">GTPL</a> - A TypeScript
|
||
library designed for creating reactive template systems with a unique
|
||
approach that incorporates Direct DOM and Proxy. Inspired by
|
||
technologies like Vue.js, Angular AOT or JSX, GTPL offers an efficient
|
||
and powerful way to build reactive applications in a compact 9KB(gzip)
|
||
JavaScript package.</li>
|
||
<li><a href="https://github.com/Isqanderm/ioc">ioc</a> - A powerful and
|
||
flexible Inversion of Control (IoC) container for TypeScript
|
||
applications. Inspired by Angular and NestJS.</li>
|
||
<li><a
|
||
href="https://github.com/Gabriel-c0Nsp/Lua-Generate">Lua-Generate</a> -
|
||
A CLI tool to generate boilerplate code inspired by ng tool from
|
||
Angular.</li>
|
||
<li><a href="https://github.com/maybebot/named-slots">named-slots</a> -
|
||
Use declarative “holes” in your React components instead of an
|
||
imperative prop-based approach. Inspired by slots in
|
||
Vue/Svelte/Angular/WebComponents.</li>
|
||
<li><a href="https://github.com/needle-di/needle-di">needle-di</a> - A
|
||
lightweight, type-safe Dependency Injection (DI) library for JavaScript
|
||
and TypeScript projects.</li>
|
||
<li><a
|
||
href="https://github.com/lumirlumir/npm-clang-format-node">npm-clang-format-node</a>
|
||
- Node wrapper for LLVM Clang’s clang-format and git-clang-format native
|
||
binaries inspired by <a
|
||
href="https://github.com/angular/clang-format">angular/clang-format</a>.</li>
|
||
<li><a href="https://github.com/wflixu/obfetch">obfetch</a> - A
|
||
HttpClient base on RxJS and fetch API inspired by Angular
|
||
<code>httpClient</code>.</li>
|
||
<li><a href="https://github.com/ozeanjs/ozean">ozean</a> - A modern,
|
||
simple, and high-performance web framework built on the Bun runtime. It
|
||
provides a development experience and architecture that should be
|
||
familiar to Angular users.</li>
|
||
<li><a href="https://github.com/Joery-M/prang">prang</a> - A framework
|
||
that looks like Angular, smells like Angular, but is actually Vue.</li>
|
||
<li><a
|
||
href="https://github.com/Prasthuth-Pradeep/PrasthuthTS">PrasthuthTS</a>
|
||
- A TypeScript framework, inspired by Angular, that features a modular,
|
||
component-based architecture, two-way data binding, and a flexible
|
||
routing system, all while leveraging TypeScript’s strong typing to
|
||
simplify development and enhance maintainability.</li>
|
||
<li><a
|
||
href="https://github.com/vipulkmr02/ReactiveForms">ReactiveForms</a> -
|
||
Retrieve form input values using the DOM and implement form validation,
|
||
drawing inspiration from Angular’s Reactive Forms approach.</li>
|
||
<li><a href="https://github.com/joanpablo/reactive_forms"><span
|
||
class="citation"
|
||
data-cites="joanpablo/reactive_forms">@joanpablo/reactive_forms</span></a>
|
||
- This library, written in Dart, employs a model-driven approach to
|
||
managing form inputs and validations, drawing significant inspiration
|
||
from Angular’s Reactive Forms.</li>
|
||
<li><a href="https://github.com/buiapp/reaktiv">reaktiv</a> - Reactive
|
||
Signals for Python with first-class async support, inspired by Angular’s
|
||
reactivity model.</li>
|
||
<li><a href="https://github.com/silicia-apps/sio">sio</a> - Silicia
|
||
Framework: a fresh approach built upon Ionic, designed to streamline the
|
||
development of hybrid applications and websites.</li>
|
||
<li><a
|
||
href="https://github.com/skycodr/ts-react-directives">ts-react-directives</a>
|
||
- A small React/Typescript library designed to mimic Angular
|
||
directives.</li>
|
||
<li><a
|
||
href="https://github.com/kaokei/use-vue-service">use-vue-service</a> -
|
||
Lightweight Vue 3 state management with dependency injection, inspired
|
||
by Angular services.</li>
|
||
<li><a href="https://github.com/RamanSharma100/vyuha">vyuha</a> - A
|
||
Nodejs Template Engine Inspired by EJS, Angular, and Laravel Blade.</li>
|
||
</ul>
|
||
<h4 id="other-lists">Other Lists</h4>
|
||
<blockquote>
|
||
<p>This Awesome List had a fallow period without many updates, and we’d
|
||
like to thank these other repos for picking up the slack.</p>
|
||
</blockquote>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/pegaltier/awesome-utils-dev/blob/master/utils-coding/utils-angular-list.md">awesome-utils-dev/angular</a>
|
||
- This is an exhaustive list of resources covering the whole Angular
|
||
ecosystem. This should be your next step if you haven’t found what you
|
||
need here.</li>
|
||
<li><a
|
||
href="https://github.com/DaanDeSmedt/awesome-angular">awesome-angular</a></li>
|
||
<li><a
|
||
href="https://angular-enterprise.com/en/ngcategory/resources/">angular
|
||
enterprise</a></li>
|
||
<li><a href="https://angular.framework.dev/">framework.dev</a> - Search,
|
||
compare, and discover top Angular libraries and community-driven
|
||
resources in Angular.</li>
|
||
</ul>
|
||
<hr />
|
||
<h4 id="license">License</h4>
|
||
<p><a href="https://creativecommons.org/publicdomain/zero/1.0/"><img
|
||
src="https://licensebuttons.net/p/zero/1.0/88x31.png"
|
||
alt="CC0" /></a></p>
|
||
<p><a href="https://github.com/PatrickJS/awesome-angular">angular.md
|
||
Github</a></p>
|