1745 lines
79 KiB
HTML
1745 lines
79 KiB
HTML
<p align="center">
|
||
<a href="https://patrickjs.com" target="_blank">
|
||
<img src="/media/awesome-angular.png" alt="Awesome Angular" /> </a>
|
||
</p>
|
||
<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>This is the original Awesome list of the Angular2 framework, today
|
||
known as just <a href="https://angular.io/">Angular</a>. This repository
|
||
contains intriguing libraries and repos in the Angular ecosystem for
|
||
both inexperienced and seasoned developers.</p>
|
||
<h5 id="current-angular-version">Current Angular version:</h5>
|
||
<p><a href="https://www.npmjs.com/~angular"><img
|
||
src="https://badge.fury.io/js/%40angular%2Fcore.svg"
|
||
alt="npm version" /></a></p>
|
||
<p>Table of contents:</p>
|
||
<ul>
|
||
<li><a href="#angular">Angular</a>
|
||
<ul>
|
||
<li><a href="#official-resources">Official Resources</a></li>
|
||
<li><a href="#community">Community</a></li>
|
||
<li><a href="#experts-on-twitter">Experts on Twitter</a></li>
|
||
<li><a href="#blogs">Blogs</a></li>
|
||
<li><a href="#server-side-rendering">Server-Side Rendering</a></li>
|
||
<li><a href="#material-design">Material Design</a></li>
|
||
<li><a href="#cheatsheet">Cheatsheet</a></li>
|
||
<li><a href="#testing">Testing</a></li>
|
||
<li><a href="#angular-cli">Angular CLI</a></li>
|
||
<li><a href="#webpack">Webpack</a></li>
|
||
<li><a href="#youtube-channels">YouTube Channels</a></li>
|
||
<li><a href="#style-guides">Style Guides</a></li>
|
||
<li><a href="#books">Books</a></li>
|
||
<li><a href="#on-site-training">On-Site Training</a></li>
|
||
<li><a href="#online-training">Online Training</a></li>
|
||
<li><a href="#integrations">Integrations</a></li>
|
||
<li><a href="#site-templates">Site Templates</a></li>
|
||
<li><a href="#generators">Generators</a></li>
|
||
<li><a href="#documentation-tools">Documentation tools</a></li>
|
||
<li><a href="#developer-tools">Developer tools</a></li>
|
||
<li><a href="#schematics">Schematics</a></li>
|
||
<li><a href="https://angular-challenges.vercel.app/">Angular
|
||
Challenges</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="#charts">Charts</a></li>
|
||
<li><a href="#drag/drop">Drag/Drop</a></li>
|
||
<li><a href="#editor-components">Editor Components</a></li>
|
||
<li><a href="#file-upload">File Upload</a></li>
|
||
<li><a href="#form-controls">Form Controls</a></li>
|
||
<li><a href="#icons">Icons</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="#maps">Maps</a></li>
|
||
<li><a href="#notifications">Notifications</a></li>
|
||
<li><a href="#state-management">State Management</a></li>
|
||
<li><a href="#tables">Tables</a></li>
|
||
<li><a href="#ui-libraries">UI Libraries</a></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="#jam-stack">JAM Stack</a></li>
|
||
<li><a href="#universal-angular-2">Universal</a>
|
||
<ul>
|
||
<li><a href="#universal-courses-and-tutorials">Courses &
|
||
Tutorials</a></li>
|
||
<li><a href="#universal-general-resources">Universal General
|
||
Resources</a></li>
|
||
<li><a href="#universal-seed-projects">Seed Projects</a></li>
|
||
</ul></li>
|
||
<li><a href="#angular-2-in-typescript">TypeScript</a>
|
||
<ul>
|
||
<li><a href="#typescript-general-resources">TypeScript General
|
||
Resources</a></li>
|
||
<li><a href="#typescript-seed-projects">Seed Projects</a></li>
|
||
</ul></li>
|
||
<li><a href="#angular-2-in-dart">Dart</a>
|
||
<ul>
|
||
<li><a href="#dart-general-resources">General Resources</a></li>
|
||
</ul></li>
|
||
<li><a href="#angular-2-in-traceur">Traceur</a>
|
||
<ul>
|
||
<li><a href="#traceur-general-resources">Traceur General
|
||
Resources</a></li>
|
||
<li><a href="#traceur-seed-projects">Seed Projects</a></li>
|
||
</ul></li>
|
||
<li><a href="#angular-2-in-es5">ES5</a>
|
||
<ul>
|
||
<li><a href="#es5-seed-projects">Seed Projects</a></li>
|
||
</ul></li>
|
||
<li><a href="#ionic-in-angular">Ionic</a>
|
||
<ul>
|
||
<li><a href="#ionic-general-resources">Ionic General Resources</a></li>
|
||
</ul></li>
|
||
<li><a href="#meteor-in-angular-2">Meteor</a>
|
||
<ul>
|
||
<li><a href="#meteor-general-resources">Meteor General
|
||
Resources</a></li>
|
||
<li><a href="#meteor-seed-projects">Seed Projects</a></li>
|
||
</ul></li>
|
||
<li><a href="#angular-2-in-nativescript">NativeScript</a>
|
||
<ul>
|
||
<li><a href="#nativescript-general-resources">NativeScript General
|
||
Resources</a></li>
|
||
<li><a href="#nativescript-seed-projects">Seed Projects</a></li>
|
||
</ul></li>
|
||
<li><a href="#angular-2-in-react-native">React Native</a>
|
||
<ul>
|
||
<li><a href="#react-native-general-resources">React Native General
|
||
Resources</a></li>
|
||
<li><a href="#react-native-projects">React Native Projects</a></li>
|
||
</ul></li>
|
||
<li><a href="#angular-2-in-scala">Scala</a>
|
||
<ul>
|
||
<li><a href="#scala-seed-projects">Seed Projects</a></li>
|
||
</ul></li>
|
||
<li><a href="#angular-2-components-with-bit">Bit</a></li>
|
||
<li><a href="#security">Security</a></li>
|
||
<li><a href="#authentication">Authentication</a></li>
|
||
<li><a href="#ngrx">NgRx</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.io">Site</a></li>
|
||
<li><a href="https://blog.angular.io">Blog</a></li>
|
||
<li><a href="https://angular.io/docs">Documentation</a></li>
|
||
<li><a href="https://angular.io/guide/cheatsheet">Cheatsheet</a></li>
|
||
<li><a href="https://angular.io/guide/quickstart">Getting Started
|
||
Guide</a></li>
|
||
<li><a href="https://github.com/angular/angular">GitHub Repo</a></li>
|
||
<li><a href="https://angular.dev">Future Site</a></li>
|
||
</ul>
|
||
<h4 id="community">Community</h4>
|
||
<ul>
|
||
<li><code>#angular2</code> channel on Freenode IRC Server.</li>
|
||
<li><a
|
||
href="https://twitter.com/hashtag/angular"><code>#angular</code></a>
|
||
hashtag on Twitter.</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://twitter.com/angular"><span class="citation"
|
||
data-cites="Angular">@Angular</span> on Twitter</a></li>
|
||
<li><a href="https://www.reddit.com/r/Angular2/">/r/Angular2
|
||
Subreddit</a></li>
|
||
<li><a href="https://www.facebook.com/groups/angular2/">Angular Group on
|
||
Facebook</a></li>
|
||
<li><a href="https://angularair.com/">AngularAir</a> podcast and live
|
||
broadcast.</li>
|
||
<li><a href="https://devchat.tv/adv-in-angular">Adventures in
|
||
Angular</a> podcast.</li>
|
||
<li><a href="https://angularexpo.com/">Angular Expo</a> showcase.</li>
|
||
<li><a
|
||
href="https://angularbuddies.slack.com/messages/ng-2/"><code>#ng-2 Slack Channel</code></a>
|
||
on AngularBuddies.</li>
|
||
<li><a href="https://hackr.io/tutorials/learn-angular">Programming
|
||
Community Curated Resources for Learning Angular</a></li>
|
||
<li><a
|
||
href="https://dashboard.nbshare.io/apps/stackoverflow/top-angular-questions/">Top
|
||
rated Angular stackoverflow questions Dashboard</a></li>
|
||
</ul>
|
||
<h4 id="angular-team-on-twitter">Angular Team on twitter</h4>
|
||
<ul>
|
||
<li><a href="https://twitter.com/mhevery"><span class="citation"
|
||
data-cites="mhevery">@mhevery</span></a></li>
|
||
<li><a href="https://twitter.com/IgorMinar"><span class="citation"
|
||
data-cites="IgorMinar">@IgorMinar</span></a></li>
|
||
<li><a href="https://twitter.com/naomitraveller"><span class="citation"
|
||
data-cites="naomitraveller">@naomitraveller</span></a></li>
|
||
<li><a href="https://twitter.com/mgechev">Minko Gechev</a></li>
|
||
<li><a href="https://twitter.com/AlanAgius4">Alan Agius</a></li>
|
||
<li><a href="https://twitter.com/gkalpakas">George Kalpakas</a></li>
|
||
<li><a href="https://twitter.com/stephenfluin">Stephen Fluin</a></li>
|
||
</ul>
|
||
<h4 id="experts-on-twitter">Experts on Twitter</h4>
|
||
<blockquote>
|
||
<p>List of Angular experts you should follow on Twitter (in no
|
||
particular order). This list is by no means complete.</p>
|
||
</blockquote>
|
||
<ul>
|
||
<li><a href="https://twitter.com/PatrickJS__"><span class="citation"
|
||
data-cites="PatrickJS__">@PatrickJS__</span></a></li>
|
||
<li><a href="https://twitter.com/scotups"><span class="citation"
|
||
data-cites="scotups">@scotups</span></a></li>
|
||
<li><a href="https://twitter.com/pkozlowski_os"><span class="citation"
|
||
data-cites="pkozlowski_os">@pkozlowski_os</span></a></li>
|
||
<li><a href="https://twitter.com/teropa"><span class="citation"
|
||
data-cites="teropa">@teropa</span></a></li>
|
||
<li><a href="https://twitter.com/eggheadio"><span class="citation"
|
||
data-cites="eggheadio">@eggheadio</span></a></li>
|
||
<li><a href="https://twitter.com/hirez_io"><span class="citation"
|
||
data-cites="hirez_io">@hirez_io</span></a></li>
|
||
<li><a href="https://twitter.com/cedric_exbrayat"><span class="citation"
|
||
data-cites="cedric_exbrayat">@cedric_exbrayat</span></a></li>
|
||
<li><a href="https://twitter.com/amcdnl"><span class="citation"
|
||
data-cites="amcdnl">@amcdnl</span></a></li>
|
||
<li><a href="https://twitter.com/victorsavkin"><span class="citation"
|
||
data-cites="victorsavkin">@victorsavkin</span></a></li>
|
||
<li><a href="https://twitter.com/jeffbcross"><span class="citation"
|
||
data-cites="jeffbcross">@jeffbcross</span></a></li>
|
||
<li><a href="https://twitter.com/waterplea"><span class="citation"
|
||
data-cites="waterplea">@waterplea</span></a></li>
|
||
<li><a href="https://twitter.com/marsibarsi"><span class="citation"
|
||
data-cites="marsibarsi">@marsibarsi</span></a></li>
|
||
<li><a href="https://twitter.com/maciejtreder"><span class="citation"
|
||
data-cites="maciejtreder">@maciejtreder</span></a></li>
|
||
<li><a href="https://twitter.com/codewith_ahsan"><span class="citation"
|
||
data-cites="codewith_ahsan">@codewith_ahsan</span></a></li>
|
||
</ul>
|
||
<h5 id="google-developer-experts"><a
|
||
href="https://developers.google.com/experts/all/technology/web-technologies">Google
|
||
Developer Experts</a></h5>
|
||
<ul>
|
||
<li><a href="https://twitter.com/jack_franklin">Jack Franklin</a></li>
|
||
<li><a href="https://twitter.com/ThierryChatel">Thierry Chatel</a></li>
|
||
<li><a href="https://twitter.com/urishaked">Uri Shaked</a></li>
|
||
<li><a href="https://twitter.com/gruizdevilla">Gonzalo Ruiz de Villa
|
||
Suárez</a></li>
|
||
<li><a href="https://twitter.com/sharondio">Sharon DiOrio</a></li>
|
||
<li><a href="https://twitter.com/John_Papa">John Papa</a></li>
|
||
<li><a href="https://twitter.com/danwahlin">Dan Wahlin</a></li>
|
||
<li><a href="https://twitter.com/christianweyer">Christian
|
||
Weyer</a></li>
|
||
<li><a href="https://twitter.com/toddmotto">Todd Motto</a></li>
|
||
<li><a href="https://twitter.com/timruffles">Tim Ruffles</a></li>
|
||
<li><a href="https://twitter.com/manekinekko">Wassim Chegham</a></li>
|
||
<li><a href="https://twitter.com/js_dev">Aaron Frost</a></li>
|
||
<li><a href="https://twitter.com/willmendesneto">Wilson Mendes</a></li>
|
||
<li><a href="https://twitter.com/jaredwilli">Jared Williams</a></li>
|
||
<li><a href="https://twitter.com/gerardsans">Gerard Sans</a></li>
|
||
<li><a href="https://twitter.com/PascalPrecht">Pascal Precht</a></li>
|
||
<li><a href="https://twitter.com/jeffwhelpley/">Jeff Whelpley</a></li>
|
||
<li><a href="https://twitter.com/elecash/">Raúl Jiménez</a></li>
|
||
<li><a href="https://twitter.com/cironunesdev/">Ciro Nunes</a></li>
|
||
<li><a href="https://twitter.com/webmaxru">Maxim Salnikov</a></li>
|
||
<li><a href="https://twitter.com/deborahkurata">Deborah Kurata</a></li>
|
||
<li><a href="https://twitter.com/shai_reznik">Shai Reznik</a></li>
|
||
<li><a href="https://twitter.com/manfredsteyer">Manfred Steyer</a></li>
|
||
<li><a href="https://twitter.com/juristr">Juri Strumpflohner</a></li>
|
||
<li><a href="https://twitter.com/willgmbr">William Grasel</a></li>
|
||
<li><a href="https://twitter.com/AlyssaNicoll">Alyssa Nicoll</a></li>
|
||
<li><a href="https://twitter.com/nirkaufman">Nir kaufman</a></li>
|
||
<li><a href="https://twitter.com/valorkin">Dmitriy Shekhovtsov</a></li>
|
||
<li><a href="https://twitter.com/jeffdelaney23">Jeff Delaney</a></li>
|
||
<li><a href="https://twitter.com/TheNishuGoel">Nishu Goel</a></li>
|
||
<li><a href="https://twitter.com/waterplea">Alex Inkin</a></li>
|
||
<li><a href="https://twitter.com/SantoshYadavDev">Santosh Yadav</a></li>
|
||
<li><a href="https://twitter.com/ankitsharma_007">Ankit</a></li>
|
||
<li><a href="https://twitter.com/SiddAjmera">Siddharth Ajmera</a></li>
|
||
<li><a href="https://twitter.com/codewith_ahsan">Muhammad Ahsan
|
||
Ayaz</a></li>
|
||
<li><a href="https://twitter.com/DecodedFrontend">Dmytro
|
||
Mezhenskyi</a></li>
|
||
<li><a href="https://twitter.com/Michael_Hladky">Michael Hladky</a></li>
|
||
<li><a href="https://github.com/fabiobiondi">Fabio Biondi</a></li>
|
||
<li><a href="https://twitter.com/laforge_toma">Thomas Laforge</a></li>
|
||
<li><a
|
||
href="https://github.com/gdi2290/awesome-angular/edit/gh-pages/README.md"><strong>{{</strong>
|
||
add_expert <strong>}}</strong></a></li>
|
||
</ul>
|
||
<h4 id="blogs">Blogs</h4>
|
||
<ul>
|
||
<li><a href="https://blog.angular.io/">angular</a> - Official Angular
|
||
blog</li>
|
||
<li><a href="https://modernangular.com/">modern-angular</a> - Josh
|
||
Morony’s website is a collection of content centered around creating
|
||
modern Angular applications using the latest Angular features and
|
||
concepts.</li>
|
||
<li><a href="https://angularexperts.io/blog">angularexperts</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://justangular.com/">justangular</a> - Shares the
|
||
newest and most important updates about Angular, along with useful tips
|
||
and tricks.</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>
|
||
</ul>
|
||
<h4 id="server-side-rendering">Server-Side Rendering</h4>
|
||
<ul>
|
||
<li><a href="https://github.com/angular/universal">Angular Universal
|
||
Repository (GitHub)</a></li>
|
||
<li><a
|
||
href="https://snipcart.com/blog/angular-seo-universal-server-side-rendering">SEO-Friendly
|
||
Angular SPA: Universal Server-Side Rendering Tutorial</a></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://angular.dev/guide/ssr#enable-server-side-rendering">ssr</a>
|
||
- Documentation for the new ssr package built into the framework.</li>
|
||
</ul>
|
||
<h4 id="material-design">Material Design</h4>
|
||
<ul>
|
||
<li><a href="https://github.com/angular/material2">Official Angular
|
||
Material Design (GitHub)</a></li>
|
||
<li><a
|
||
href="https://github.com/mdbootstrap/mdb-angular-ui-kit">MDBootstrap</a>
|
||
- Angular 16 & Bootstrap 5 & Material Design 2.0 UI KIT</li>
|
||
</ul>
|
||
<h4 id="cheatsheet">Cheatsheet</h4>
|
||
<ul>
|
||
<li><a href="https://angular.io/guide/cheatsheet">Official Angular
|
||
Cheatsheet</a></li>
|
||
<li><a
|
||
href="https://docs.google.com/document/d/1FYyA-b9rc2UtlYyQXjW7lx4Y08MSpuWcbbuqVCxHga0/edit#heading=h.34sus6g4zss3">Dart
|
||
API Cheatsheet</a></li>
|
||
<li><a
|
||
href="https://github.com/andresaraujo/angular2_cheatsheet_dart">Angular
|
||
Dart cheatsheet</a></li>
|
||
<li><a
|
||
href="https://github.com/mgechev/angular-performance-checklist">Angular
|
||
Performance Checklist</a></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://ngrefs.com">Angular References</a></li>
|
||
<li><a href="https://roadmap.sh/angular">Angular Developer
|
||
Roadmap</a></li>
|
||
<li><a href="https://www.interviewbit.com/angular-cheat-sheet/">Angular
|
||
Cheetsheet</a></li>
|
||
</ul>
|
||
<h5 id="testing">Testing</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://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://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/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/hirezio/auto-spies">auto-spies</a> -
|
||
Create automatic spies from classes</li>
|
||
<li><a
|
||
href="https://material.angular.io/cdk/test-harnesses/overview"><span
|
||
class="citation"
|
||
data-cites="angular/cdk/testing">@angular/cdk/testing</span></a> - <span
|
||
class="citation"
|
||
data-cites="angular/cdk/testing">@angular/cdk/testing</span> provides
|
||
infrastructure to help with testing Angular components.</li>
|
||
<li><a href="https://www.cypress.io/">cypress</a> - End to End and
|
||
Component Testing for Angular.<br />
|
||
</li>
|
||
<li><a href="https://jasmine.github.io/">jasmine</a> - Simple JavaScript
|
||
testing</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/sand4rt/playwright-ct-angular">playwright-ct-angular</a>
|
||
- Playwright Angular component testing.</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://github.com/ngneat/spectator">spectator</a> - A
|
||
Powerful Tool to Simplify Your Angular Tests</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://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://www.youtube.com/playlist?list=PLu062eICIOdGAJ4AgTzHI6EokHnB90bRJ">YouTube</a>
|
||
- How do I Test? playlist.</li>
|
||
<li><a href="https://www.youtube.com/watch?v=emnwsVy8wRs">YouTube</a> -
|
||
Angular Unit Testing Made Easy</li>
|
||
<li><a href="https://timdeschryver.dev/blog/testing-an-ngrx-project">Tim
|
||
Deschryver Blog</a> - Testing an NgRx project</li>
|
||
</ul>
|
||
<h4 id="angular-cli">Angular CLI</h4>
|
||
<ul>
|
||
<li><a href="https://cli.angular.io/">Official web page</a></li>
|
||
<li><a href="https://github.com/angular/angular-cli">Official
|
||
repository</a></li>
|
||
<li><a href="https://github.com/smartin85/ng-cli-hooks">ng-cli-hooks</a>
|
||
- Hooks for the Angular CLI to customize the build</li>
|
||
</ul>
|
||
<h4 id="webpack">Webpack</h4>
|
||
<ul>
|
||
<li><a href="https://webpack.js.org">Official web page</a></li>
|
||
<li><a href="https://github.com/gdi2290/angular-starter">Angular Webpack
|
||
Starter from PatrickJS</a></li>
|
||
<li><a href="https://github.com/preboot/angular-webpack">Angular Webpack
|
||
from preboot</a></li>
|
||
<li><a
|
||
href="https://github.com/qdouble/angular-webpack2-starter">Angular
|
||
Nightly Webpack Starter</a></li>
|
||
<li><a
|
||
href="https://github.com/damienbod/AngularWebpackVisualStudio">Angular
|
||
Webpack with Visual Studio ASP.NET Core from Damien Bowden</a></li>
|
||
<li><a
|
||
href="https://github.com/schempy/angular2-typescript-webpack">Angular
|
||
Typescript Webpack from schempy</a></li>
|
||
<li><a href="https://github.com/michaelbazos/angular-starter">Angular
|
||
Webpack Tour of Heroes from michaelbazos</a> - Tour of Heroes official
|
||
typescript tutorial built with webpack</li>
|
||
<li><a href="https://github.com/jorgeas80/angular2-webpack-toh">Angular
|
||
Webpack + rxjs + modules</a></li>
|
||
<li><a
|
||
href="https://github.com/just-jeb/angular-builders/tree/master/packages/custom-webpack">Angular
|
||
Builders</a> - custom webpack</li>
|
||
</ul>
|
||
<h4 id="youtube-channels">YouTube Channels</h4>
|
||
<ul>
|
||
<li><a href="https://www.youtube.com/@procademy">YouTube</a> -
|
||
Procademy</li>
|
||
<li><a href="https://www.youtube.com/@MonsterlessonsAcademy">YouTube</a>
|
||
- Monsterlessons Academy</li>
|
||
<li><a href="https://www.youtube.com/@JoshuaMorony">YouTube</a> - Joshua
|
||
Morony</li>
|
||
<li><a href="https://www.youtube.com/@NihiraTechiees">YouTube</a> -
|
||
Nihira Techiees</li>
|
||
<li><a href="https://www.youtube.com/@AngularUniversity">YouTube</a> -
|
||
Angular University</li>
|
||
<li><a href="https://www.youtube.com/@RainerHahnekamp">YouTube</a> -
|
||
Rainer Hahnekamp</li>
|
||
<li><a href="https://www.youtube.com/@CodeShotsWithProfanis">YouTube</a>
|
||
- Code Shots With Profanis</li>
|
||
<li><a href="https://www.youtube.com/@deborah_kurata">YouTube</a> -
|
||
Deborah Kurata</li>
|
||
<li><a href="https://www.youtube.com/@BrandonRobertsDev">YouTube</a> -
|
||
BrandonRobertsDev</li>
|
||
<li><a href="https://www.youtube.com/@DecodedFrontend">YouTube</a> -
|
||
Decoded Frontend</li>
|
||
<li><a href="https://www.youtube.com/@galaxies_dev">YouTube</a> -
|
||
Galaxies_dev</li>
|
||
</ul>
|
||
<h4 id="style-guides">Style Guides</h4>
|
||
<ul>
|
||
<li><a href="https://angular.io/guide/styleguide">Official Angular style
|
||
guide</a></li>
|
||
<li><a href="https://github.com/ng-seed/angular-tslint-rules">Shared
|
||
TSLint & codelyzer rules by fulls1z3</a></li>
|
||
</ul>
|
||
<h4 id="books">Books</h4>
|
||
<ul>
|
||
<li><a href="https://www.ng-book.com/2/">ng-book 2</a>
|
||
<code>fullstack.io</code></li>
|
||
<li><a href="https://books.ninja-squad.com/angular">Become a ninja with
|
||
Angular 2</a> <code>Ninja Squad</code></li>
|
||
<li><a
|
||
href="https://www.manning.com/books/angular-2-development-with-typescript">Angular
|
||
Development with TypeScript</a> <code>Manning Publications</code></li>
|
||
<li><a href="https://www.manning.com/books/angular-in-action">Angular in
|
||
Action</a> <code>Manning Publications</code></li>
|
||
<li><a href="https://leanpub.com/practical-angular-2">Practical Angular
|
||
2</a> <code>Leanpub</code></li>
|
||
<li><a
|
||
href="https://www.packtpub.com/product/switching-to-angular-2/9781785886201">Switching
|
||
to Angular 2</a> <code>Packt Publishing</code></li>
|
||
<li><a
|
||
href="https://www.manning.com/books/testing-angular-applications">Testing
|
||
Angular Applications</a> <code>Manning Publications</code></li>
|
||
<li><a href="https://angular-buch.com/">Angular-Buch (German)</a>
|
||
<code>dpunkt.verlag</code></li>
|
||
<li><a
|
||
href="https://www.c-sharpcorner.com/ebooks/build-a-full-stack-web-application-using-angular-and-firebase">Build
|
||
a Full-Stack Web Application Using Angular & Firebase</a>
|
||
<code>Ankit Sharma</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://www.manning.com/books/build-a-frontend-web-framework-from-scratch">Build
|
||
a Frontend Web Framework (From Scratch)</a>
|
||
<code>Manning Publications</code></li>
|
||
</ul>
|
||
<h4 id="on-site-training">On-Site Training</h4>
|
||
<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>
|
||
</ul>
|
||
<h4 id="online-training">Online Training</h4>
|
||
<ul>
|
||
<li><a href="https://angularstart.com/">Angular Start</a> - Learn to
|
||
build professional-grade Angular v17 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>
|
||
</ul>
|
||
<h4 id="integrations">Integrations</h4>
|
||
<ul>
|
||
<li><a href="https://github.com/apollographql/apollo-angular">GraphQL +
|
||
Angular</a> - Caching GraphQL client for Angular and every GraphQL
|
||
server</li>
|
||
<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://learn.genesis.global/docs/previous/web/integrations/angular/">Genesis
|
||
Foundation</a> - Genesis is a low-code platform designed specifically
|
||
for the financial markets.</li>
|
||
<li><a
|
||
href="https://github.com/hakimio/ngx-google-analytics">ngx-google-analytics</a>
|
||
- A simple Google analytics integration for Angular apps.</li>
|
||
<li><a
|
||
href="https://cloudinary.com/documentation/angular_integration">cloudinary</a>
|
||
- Angular SDK from Cloudinary.</li>
|
||
</ul>
|
||
<h4 id="site-templates">Site Templates</h4>
|
||
<ul>
|
||
<li><a href="https://github.com/akveo/ngx-admin">ngx-admin</a> -
|
||
Customizable admin dashboard template based on Angular 10+</li>
|
||
<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 17 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/makimenko/angular-template-for-threejs">angular-template-for-threejs</a>
|
||
- Angular Template For Three.js</li>
|
||
<li><a href="https://github.com/duluca/lemon-mart">lemon-mart</a> -
|
||
Angular Template App with a Router-first architecture</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/makimenko/angular-template-for-threejs">angular-template-for-threejs</a>
|
||
- Angular Template For Three.js</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/GabrielToth/Angular-V17-Template">Angular-V17-Template</a>
|
||
- A template designed for Angular 17 that emphasizes clean code
|
||
practices and test-friendly development.</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/meta-d/sap-fiori-templates">sap-fiori-templates</a>
|
||
- SAP BTP & Fiori App templates implemented with third-party
|
||
frontend frameworks such as React, Vue, and Angular.</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 v17 + NestJS v9 +
|
||
ng-openapi-gen.</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/tarlepp/angular-ngrx-frontend">angular-ngrx-frontend</a>
|
||
- Angular NgRx powered frontend template for Symfony (or similar)
|
||
backend.</li>
|
||
</ul>
|
||
<h4 id="generators">Generators</h4>
|
||
<ul>
|
||
<li>Node.js
|
||
<ul>
|
||
<li>Slush
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/RyanMetin/slush-angular2">TheVelourFog/slush-angular2</a></li>
|
||
</ul></li>
|
||
<li>Yeoman
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/chrisdwheatley/generator-angular2">swirlycheetah/generator-angular2</a></li>
|
||
</ul></li>
|
||
<li>ngX-Rocket: Extensible Angular 4+ enterprise-grade generator and
|
||
tools
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/ngx-rocket/generator-ngx-rocket">ngx-rocket/generator-ngx-rocket</a></li>
|
||
<li><a href="https://github.com/ngx-rocket/cli">ngx-rocket/cli</a></li>
|
||
<li><a
|
||
href="https://github.com/ngx-rocket/core">ngx-rocket/core</a></li>
|
||
</ul></li>
|
||
</ul></li>
|
||
<li>Scaffold
|
||
<ul>
|
||
<li><a href="https://scaffoldhub.io">ScaffoldHub.io</a>: Generate full
|
||
Angular Material applications with MongoDB, SQL or Firebase Firestore
|
||
databases.</li>
|
||
</ul></li>
|
||
<li>Spring Boot
|
||
<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://www.jhipster.tech">JHipster</a>: Open source app
|
||
generator for Spring Boot and Angular</li>
|
||
</ul></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>
|
||
</ul>
|
||
<h4 id="developer-tools">Developer tools</h4>
|
||
<ul>
|
||
<li><a href="https://stackblitz.com">StackBlitz</a> - Instant Dev
|
||
Environments</li>
|
||
<li><a href="https://codesandbox.io/s/angular-angular">CodeSandbox</a> -
|
||
An online IDE and prototyping tool for rapid Angular development.</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.io/guide/devtools/">Angular Dev Tools</a> -
|
||
Angular DevTools is a Chrome extension that provides debugging and
|
||
profiling capabilities for Angular applications.</li>
|
||
<li><a
|
||
href="https://marketplace.visualstudio.com/items?itemName=gparlakov.scuri-code">Scuri
|
||
Code</a> - A VS Code extention that will generate and maintain seeds for
|
||
your unit tests.</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>
|
||
</ul>
|
||
<h4 id="schematics">Schematics</h4>
|
||
<ul>
|
||
<li><a href="https://github.com/briebug/cypress-schematic">Cypress</a>:
|
||
Add Cypress to an Angular CLI application</li>
|
||
<li><a href="https://github.com/briebug/jest-schematic">Jest</a>:
|
||
Configure Angular to execute unit tests with Jest instead of Karma +
|
||
Jasmine</li>
|
||
<li><a
|
||
href="https://github.com/schuchard/prettier-schematic">Prettier</a>: Add
|
||
Prettier and a pre-commit hook for formatting staged files in an Angular
|
||
application</li>
|
||
<li><a href="https://github.com/ngneat/tailwind">Tailwind CSS</a>: Add
|
||
Tailwind CSS to an Angular application</li>
|
||
<li><a
|
||
href="https://github.com/JohnnyDevNull/ng-three-template">Threejs</a>:
|
||
New three.js starter app</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/filipows/angular-animations">angular-animations</a>
|
||
- Easy, Reusable Animation Utility library for 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>
|
||
</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 6.0+ that can display events
|
||
on a month, week or day view.</li>
|
||
<li><a
|
||
href="https://github.com/michelebombardi/angular-calendar-scheduler">angular-calendar-scheduler</a>
|
||
- A scheduler view component for angular-calendar</li>
|
||
<li><a
|
||
href="https://github.com/ng-fullcalendar/ng-fullcalendar">ng-fullcalendar</a>
|
||
- Fullcalendar module for Angular</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/IOMechs/angular-year-calendar">angular-year-calendar</a>
|
||
- A powerful and performant Angular year calendar library built with
|
||
❤️</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>
|
||
</ul>
|
||
<h4 id="dragdrop">Drag/Drop</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/valor-software/ng2-dragula">ng2-dragula</a> -
|
||
Drag and Drop so simple it hurts!</li>
|
||
<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">ngx-dropzone</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 <span class="citation"
|
||
data-cites="angular/cdk/drag-drop">@angular/cdk/drag-drop</span> module
|
||
provides you with a way to easily and declaratively create drag-and-drop
|
||
interfaces.</li>
|
||
</ul>
|
||
<h4 id="editor-components">Editor Components</h4>
|
||
<ul>
|
||
<li><a href="https://github.com/TypeCtrl/ngx-codemirror"><span
|
||
class="citation"
|
||
data-cites="ctrl/ngx-codemirror">@ctrl/ngx-codemirror</span></a> -
|
||
Codemirror Wrapper for Angular.</li>
|
||
<li><a href="https://github.com/insurance-technologies/ng-rooster"><span
|
||
class="citation"
|
||
data-cites="instechnologies/ng-rooster">@instechnologies/ng-rooster</span></a>
|
||
- Angular wrapper of roosterjs, a rich text editor.</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/instance-oom/ngx-markdown-editor">ngx-markdown-editor</a>
|
||
- Angular markdown editor based on ace editor.</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/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>
|
||
</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://www.npmjs.com/package/ngx-awesome-uploader">ngx-awesome-uploader</a>
|
||
Angular Library for uploading files. It supports: File Upload and
|
||
Preview (additionally preview images with lightbox), validation, image
|
||
cropper , drag and drop with multi language support.</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>
|
||
</ul>
|
||
<h4 id="form-controls">Form Controls</h4>
|
||
<ul>
|
||
<li><a href="https://github.com/TypeCtrl/ngx-emoji-mart"><span
|
||
class="citation"
|
||
data-cites="ctrl/ngx-emoji-mart">@ctrl/ngx-emoji-mart</span></a> -
|
||
Customizable Slack-like emoji picker for Angular</li>
|
||
<li><a
|
||
href="https://github.com/uNmAnNeR/imaskjs/tree/master/packages/angular-imask">angular-imask</a>
|
||
- Angular 4+ input mask</li>
|
||
<li><a
|
||
href="https://github.com/CuppaLabs/angular2-multiselect-dropdown">angular2-multiselect-dropdown</a>
|
||
- Angular 2 multiselect dropdown component for web applications</li>
|
||
<li><a
|
||
href="https://github.com/text-mask/text-mask">angular2-text-mask</a> -
|
||
Angular 2 input mask directive</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/scttcper/ngx-color">ngx-color</a> - 🎨
|
||
Color Pickers from Sketch, Photoshop, Chrome, Github, Twitter &
|
||
more</li>
|
||
<li><a
|
||
href="https://github.com/iamartyom/ngx-flag-picker">ngx-flag-picker</a>
|
||
- 😻 Customizable Angular component which containing a dropdown with
|
||
country flags</li>
|
||
<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/udos86/ng-dynamic-forms">ng-dynamic-forms</a> -
|
||
Rapid form development library for Angular</li>
|
||
</ul>
|
||
<h4 id="icons">Icons</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/travelist/angular2-fontawesome">angular2-fontawesome</a>
|
||
- Angular2 Components and Directives for FontAwesome.</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/wadie/ngx-icon-blur">ngx-icon-blur</a> -
|
||
An Angular component that can be used to create a frosted glass effect
|
||
for icons.</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>
|
||
</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/brtnshrdr/angular2-hotkeys">angular2-hotkeys</a>
|
||
- Keyboard shortcuts for Angular 2 apps</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>
|
||
</ul>
|
||
<h4 id="layout-components">Layout Components</h4>
|
||
<ul>
|
||
<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/bertrandg/angular-split">angular-split</a>
|
||
Angular split component</li>
|
||
<li><a
|
||
href="https://github.com/orizens/ngx-infinite-scroll">ngx-infinite-scroll</a>
|
||
- Infinite Scroll Directive for Angular</li>
|
||
<li><a
|
||
href="https://github.com/naver/egjs-infinitegrid/tree/master/packages/ngx-infinitegrid">egjs-infinitegrid</a>
|
||
- Arrange infinite card elements according to various layout types like
|
||
masonry for Angular.</li>
|
||
<li><a
|
||
href="https://github.com/bartholomej/ngx-scrolltop">ngx-scrolltop</a> -
|
||
Lightweight, Material Design inspired <strong>button for
|
||
scroll-to-top</strong> of the page. 🔼 <em>No dependencies. Pure
|
||
Angular!</em> (Compatibility: Angular 9, Ivy, Universal,
|
||
<code>ng add</code>)</li>
|
||
</ul>
|
||
<h4 id="loaders">Loaders</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/johannesjo/angular2-promise-buttons">angular2-promise-buttons</a>
|
||
- Loading buttons for Angular 2 by <span class="citation"
|
||
data-cites="johannesjo">@johannesjo</span></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/knackstedt/ngx-lazy-loader"><span
|
||
class="citation"
|
||
data-cites="dotglitch/ngx-lazy-loader">@dotglitch/ngx-lazy-loader</span></a>
|
||
- Highly customizable lazy loader for Angular components.</li>
|
||
<li><a
|
||
href="https://github.com/nigrosimone/ng-lazy-load-component">ng-lazy-load-component</a>
|
||
- Lazy load Angular component into HTML template without routing.</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/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.io</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/angular/components/blob/main/src/google-maps/README.md"><span
|
||
class="citation"
|
||
data-cites="angular/google-maps">@angular/google-maps</span></a> - This
|
||
component provides a Google Maps Angular component that implements the
|
||
Google Maps JavaScript API.</li>
|
||
</ul>
|
||
<h4 id="notifications">Notifications</h4>
|
||
<ul>
|
||
<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/ngxpert/hot-toast">hot-toast</a> -
|
||
Smoking hot toast notifications for Angular.</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/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/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/flauc/angular2-notifications">angular2-notifications</a>
|
||
- A light and easy to use notifications library for Angular.</li>
|
||
</ul>
|
||
<h4 id="state-management">State Management</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/universal-model/universal-model-angular">universal-model-angular</a>
|
||
- Store and state management for Angular</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/salesforce/akita">akita</a> - A Reactive
|
||
State Management Tailored-Made for JS Applications</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/ngxs/store">ngxs</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/ngrx/platform">ngrx</a> - Reactive State
|
||
for Angular</li>
|
||
<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/TanStack/query">query</a> - Powerful
|
||
asynchronous state management, server-state utilities and data fetching
|
||
for the web.</li>
|
||
<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/state-adapt/state-adapt">state-adapt</a>
|
||
- Declarative, incremental state management library</li>
|
||
</ul>
|
||
<h4 id="tables">Tables</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/ssuperczynski/ngx-easy-table">ngx-easy-table</a>
|
||
- The Easiest Angular Table. 12kb gzipped! Tree-shakeable. 55 features
|
||
and growing!</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 here.</li>
|
||
</ul>
|
||
<h4 id="ui-libraries">UI Libraries</h4>
|
||
<h5 id="general">General</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> -
|
||
The Complete Angular Components Library.</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-mobile">NG ZORRO
|
||
MOBILE</a> - An enterprise-class mobile UI components based on Ant
|
||
Design Mobile and Angular.</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/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>
|
||
</ul>
|
||
<h5 id="material-based">Material Based</h5>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/angular-material-extensions/contacts"><span
|
||
class="citation"
|
||
data-cites="angular-material-extensions/contacts">@angular-material-extensions/contacts</span></a>
|
||
- Angular Library to manage contacts and users with a material
|
||
design</li>
|
||
<li><a href="https://github.com/angular-material-extensions/faq"><span
|
||
class="citation"
|
||
data-cites="angular-material-extensions/faq">@angular-material-extensions/faq</span></a>
|
||
- Angular Library built with material design in order to provide a
|
||
reusable faq (frequently asked questions) component for every project.
|
||
Ask, Answer and List</li>
|
||
<li><a
|
||
href="https://github.com/angular-material-extensions/google-maps-autocomplete"><span
|
||
class="citation"
|
||
data-cites="angular-material-extensions/google-maps-autocomplete">@angular-material-extensions/google-maps-autocomplete</span></a>
|
||
- <strong>Autocomplete</strong> input component and directive for
|
||
google-maps built with angular material design</li>
|
||
<li><a
|
||
href="https://github.com/angular-material-extensions/link-preview"><span
|
||
class="citation"
|
||
data-cites="angular-material-extensions/link-preview">@angular-material-extensions/link-preview</span></a>
|
||
- Angular open source UI library to preview web links</li>
|
||
<li><a href="https://github.com/angular-material-extensions/pages"><span
|
||
class="citation"
|
||
data-cites="angular-material-extensions/pages">@angular-material-extensions/pages</span></a>
|
||
- Open source library for angular apps to illustrate custom material
|
||
pages content with steps (ideal for <strong>tutorials</strong> and
|
||
<strong>explanations</strong> purposes)</li>
|
||
<li><a
|
||
href="https://github.com/angular-material-extensions/password-strength"><span
|
||
class="citation"
|
||
data-cites="angular-material-extensions/password-strength">@angular-material-extensions/password-strength</span></a>
|
||
- Angular UI library to illustrate and validate a
|
||
<strong>password</strong>’s strength with material design</li>
|
||
<li><a href="https://www.jqwidgets.com/angular/">angular-jqwidgets</a>
|
||
Advanced Angular Components with Material Design.</li>
|
||
<li><a href="https://teradata.github.io/covalent/">Covalent</a> - a UI
|
||
platform built on Angular 2.0 + Material Design</li>
|
||
<li><a href="https://github.com/angular/material2">Material 2</a> -
|
||
Angular team’s Material Design components built on top of Angular 2</li>
|
||
<li><a href="https://github.com/Teradata/covalent/">Teradata
|
||
covalent</a> - UI Platform built on <span class="citation"
|
||
data-cites="angular/material">@angular/material</span> 2.0</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 4 (Angular)</li>
|
||
<li><a href="https://ng-bootstrap.github.io">ng-bootstrap</a> - Angular
|
||
4 directives for Bootstrap 4 by the ui-bootstrap team</li>
|
||
<li><a
|
||
href="https://github.com/valor-software/ngx-bootstrap">ng2-bootstrap</a>
|
||
Native Angular2 Bootstrap 3&4 components</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://github.com/david-ui-org/david-ui-angular">David UI
|
||
Angular</a> - Components library for enterprise-level projects based on
|
||
Tailwind CSS and Angular.</li>
|
||
</ul>
|
||
<h4 id="ux-components">UX Components</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/shepherd-pro/angular-shepherd">angular-shepherd</a>
|
||
- Angular 7 Service wrapping the site tour library <a
|
||
href="https://github.com/shepherd-pro/shepherd">Shepherd</a></li>
|
||
<li><a href="https://willnguyen1312.github.io/zoom-image">Zoom Image
|
||
Library</a> - A little yet powerful framework agnostic headless-library
|
||
to zoom image on the web</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> -
|
||
ngx-ui-tour is a UI tour library inspired by angular-ui-tour.</li>
|
||
</ul>
|
||
<h4 id="viewers">Viewers</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/naver/egjs-flicking/tree/master/packages/ngx-flicking">egjs-flicking</a>
|
||
- It’s reliable, flexible and extendable carousel for Angular.</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/sheikalthaf/ngu-carousel">ngu-carousel</a> -
|
||
Angular Universal carousel.</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/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/hivivo/ngx-json-viewer">ngx-json-viewer</a> -
|
||
JSON formatter and viewer in HTML for Angular.</li>
|
||
</ul>
|
||
<h4 id="misc-components">Misc Components</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, Twitter
|
||
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://github.com/scttcper/ng2-adsense">ng2-adsense</a> -
|
||
Easy AdSense for Angular Applications</li>
|
||
<li><a href="https://github.com/cipchk/ngx-countdown">ngx-countdown</a>
|
||
- Simple, easy and performance countdown for angular</li>
|
||
<li><a href="https://github.com/ngneat/transloco"><span class="citation"
|
||
data-cites="ngneat/transloco">@ngneat/transloco</span></a> - 🚀 😍 The
|
||
internationalization (i18n) library for Angular</li>
|
||
<li><a
|
||
href="https://github.com/tolgee/tolgee-js/tree/main/packages/ngx/projects/ngx-tolgee"><span
|
||
class="citation" data-cites="tolgee/ngx">@tolgee/ngx</span></a> -
|
||
Web-based localization tool enabling users to translate directly in the
|
||
Angular app they develop.</li>
|
||
<li><a
|
||
href="https://github.com/udayvunnam/xng-breadcrumb">xng-breadcrumb</a> -
|
||
Zero config breadcrumb solutuon. A lightweight, configurable and
|
||
reactive breadcrumbs for Angular 6 and beyond.</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-portal">ng-portal</a>
|
||
Component property connection in Angular application.</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/nigrosimone/ng-generic-pipe">ng-generic-pipe</a>
|
||
Generic pipe for Angular application.</li>
|
||
</ul>
|
||
<h3 id="jam-stack">JAM Stack</h3>
|
||
<ul>
|
||
<li><a href="https://github.com/scullyio/scully">scully</a> - Scully is
|
||
a static site generator for Angular projects looking to embrace the
|
||
Jamstack.</li>
|
||
</ul>
|
||
<h3 id="universal-angular-2">Universal Angular 2</h3>
|
||
<blockquote>
|
||
<p>Universal (isomorphic) javascript support for Angular 2</p>
|
||
</blockquote>
|
||
<h4 id="universal-courses-and-tutorials">Universal Courses And
|
||
Tutorials</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://www.newline.co/courses/newline-guide-to-angular-universal">Guide
|
||
to Angular Universal - a comprehensive guide how to sharpen your
|
||
Universal Skills</a></li>
|
||
</ul>
|
||
<h4 id="universal-general-resources">Universal General Resources</h4>
|
||
<ul>
|
||
<li><a href="https://github.com/angular/universal">Universal Angular 2
|
||
Repository (GitHub)</a></li>
|
||
</ul>
|
||
<h4 id="universal-seed-projects">Universal Seed Projects</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/angular/universal-starter">universal-starter</a>
|
||
- Angular 2 Universal starter kit by <span class="citation"
|
||
data-cites="Angular-Class">@Angular-Class</span></li>
|
||
<li><a href="https://github.com/ng-seed/universal">ng-seed/universal</a>
|
||
- Seed project for Angular Universal apps featuring Server-Side
|
||
Rendering (SSR), Webpack, dev/prod modes, DLLs, AoT compilation, HMR,
|
||
SCSS compilation, lazy loading, config, cache, i18n, SEO, and
|
||
TSLint/codelyzer by <span class="citation"
|
||
data-cites="fulls1z3">@fulls1z3</span></li>
|
||
<li><a
|
||
href="https://github.com/enten/angular-universal">angular-universal</a>
|
||
- Fast, Unopinionated, Minimalist starter kit for Angular Universal 100%
|
||
powered by Angular CLI</li>
|
||
<li><h2
|
||
id="angular-universal-heroku-starter---angular-7-universal-starter-kit-with-server-side-rendering-ssr-and-easy-deployment-to-heroku"><a
|
||
href="https://github.com/Alex61NN5/angular-universal-heroku-starter">angular-universal-heroku-starter</a>
|
||
- Angular 7 Universal Starter Kit with Server-Side Rendering (SSR) and
|
||
easy deployment to Heroku</h2></li>
|
||
</ul>
|
||
<h3 id="angular-2-in-typescript">Angular 2 in TypeScript</h3>
|
||
<blockquote>
|
||
<p>TypeScript lets you write JavaScript the way you really want to.
|
||
TypeScript is a typed superset of JavaScript that compiles to plain
|
||
JavaScript.</p>
|
||
</blockquote>
|
||
<h4 id="typescript-general-resources">TypeScript General Resources</h4>
|
||
<ul>
|
||
<li><a href="https://www.typescriptlang.org/">TypeScript</a> Official
|
||
Website for TypeScript</li>
|
||
<li><a href="https://www.typescriptlang.org/play/">REPL</a> Official
|
||
TypeScript REPL that runs entirely in your browser</li>
|
||
<li><a href="https://github.com/Microsoft/TypeScript">TypeScript
|
||
Repository (GitHub)</a> Official GitHub Repo for TypeScript</li>
|
||
<li><a
|
||
href="https://github.com/DefinitelyTyped/DefinitelyTyped">DefinitelyTyped
|
||
Repository (GitHub)</a> The repository for high quality TypeScript type
|
||
definitions.</li>
|
||
</ul>
|
||
<h4 id="typescript-seed-projects">TypeScript Seed Projects</h4>
|
||
<ul>
|
||
<li><a href="https://mgechev.github.io/angular-seed/">Angular Seed</a>
|
||
Seed project for Angular apps</li>
|
||
<li><a
|
||
href="https://github.com/pkozlowski-opensource/ng2-play">ng2-play</a> A
|
||
minimal Angular2 playground using TypeScript and SystemJS loader</li>
|
||
<li><a href="https://github.com/rolandjitsu/angular-lab">Angular Lab</a>
|
||
A simple Angular 2+ setup using <a href="https://cli.angular.io">Angular
|
||
CLI</a>, <a href="https://www.typescriptlang.org">TypeScript</a>, <a
|
||
href="https://github.com/angular/flex-layout">Angular Flex Layout</a>,
|
||
<a href="https://material.angular.io">Material 2</a>, <a
|
||
href="https://angular.io/docs/ts/latest/cookbook/aot-compiler.html">AOT</a>,
|
||
and unit and e2e tests on <a href="https://travis-ci.org">Travis CI</a>
|
||
and <a href="https://saucelabs.com">Saucelabs</a>.</li>
|
||
<li><a href="https://github.com/thelgevold/angular-2-samples">Angular 2
|
||
Samples</a> Angular 2.0 sample components</li>
|
||
<li><a href="https://github.com/r-park/todo-angular-firebase">Todo app
|
||
with Firebase, OAuth, and Immutable</a></li>
|
||
<li><a
|
||
href="https://github.com/springboot-angular2-tutorial/angular2-app">Spring
|
||
Boot and Angular2 tutorial</a> Angular2 practical example based on <a
|
||
href="https://www.railstutorial.org/">Rails tutorial</a>.</li>
|
||
<li><a
|
||
href="https://github.com/ColinEberhardt/angular2-goldilocks-seed">Angular
|
||
2 Goldilocks seed</a> - A seed project for Angular 2 and TypeScript that
|
||
is not too simple, yet not too complex. In fact it’s just right!</li>
|
||
<li><a href="https://github.com/antonybudianto/angular-starter">Angular
|
||
2 Starter</a> - Simple Angular 2 Starter with Gulp workflow and Travis
|
||
CI</li>
|
||
<li><a href="https://github.com/haoliangyu/ngx-leaflet-starter">Angular
|
||
2 Leaflet Starter</a> - A map application starter based on Angular 2 and
|
||
Leaflet</li>
|
||
<li><a href="https://github.com/haoliangyu/ngx-mapboxgl-starter">Angular
|
||
2 MapboxGL Starter</a> - Another map application starter based on
|
||
Angular 2 and MapboxGL JS</li>
|
||
<li><a href="https://github.com/mkusz/ng2_websockets_quickstart">Angular
|
||
2 reconnecting websockets quickstart</a> - Simple counter using 2-way or
|
||
1-way reconnecting websockets communication</li>
|
||
<li><a href="https://github.com/cebor/ng2-start">ng2-start</a> - Minimal
|
||
setup to start creating an angular2 application</li>
|
||
<li><a
|
||
href="https://github.com/born2net/Angular-kitchen-sink">ng-kitchen-sink</a>
|
||
- The ultimate Angular 2 bootstrap single page app - touches on all key
|
||
and advanced aspects of Angular</li>
|
||
<li><a href="https://github.com/born2net/ng-skeleton">ng-skeleton</a> -
|
||
The ultimate Angular seed with ngrx, bootstrap and two factor auth</li>
|
||
<li><a href="https://github.com/amcdnl/angular2-demo">angular2-demo</a>
|
||
Minimal Angular2 Demo using TypeScript / Sass / Npm Tasks</li>
|
||
<li><a
|
||
href="https://github.com/hasanhameed07/angular2-dashboard-starter">Angular
|
||
2 Dashboard Starter</a> - Ready to use dashboard control panel seed
|
||
project based on Angular 2 and AdminLTE bootstrap theme.</li>
|
||
<li><a href="https://github.com/akveo/ngx-admin">ngx-admin</a> - Admin
|
||
template based on Nebular framework (Angular 4+, Bootstrap 4+)</li>
|
||
<li><a href="https://github.com/danday74/angular2-coverage">Angular 2
|
||
full code coverage</a> - Solid tested SystemJS and gulp workflow ready
|
||
for your code using Angular2 final release (2.1.0) .. Demonstrates unit
|
||
and full code coverage</li>
|
||
<li><a href="https://github.com/michaelbazos/angular2-starter">Angular 2
|
||
webpack</a> - Tour of Heroes official typescript tutorial built with
|
||
webpack</li>
|
||
<li><a href="https://github.com/amcdnl/ng2-boiler">ng2-boiler</a> - A
|
||
bare-bones simple starter with Angular2, TypeScript and Webpack
|
||
configured.</li>
|
||
<li><a
|
||
href="https://github.com/antonybudianto/angular-webpack-starter">Angular
|
||
Webpack Starter</a> - Angular Webpack Starter with AoT compilation,
|
||
Lazy-loading, and Tree-shaking</li>
|
||
<li><a href="https://github.com/Xamber/Reaper">Reaper</a> - Angular 2
|
||
Webpack Starter Boilerplate w/o 2269 dependencies</li>
|
||
<li><a href="https://github.com/implustech/famn">famn</a> - Angular 2 +
|
||
FeathersJS application framework for both client and server side</li>
|
||
<li><a href="https://github.com/davguij/angular-npm-module-seed">Angular
|
||
NPM Module Seed</a> - Starting point for developing Angular modules and
|
||
publishing them on NPM.</li>
|
||
<li><a href="https://github.com/gp187/angular2-d3v4-graph">Angular2 D3v4
|
||
Seed</a> - Angular2 D3v4 implementation of charts, graphs, area and view
|
||
porting seed project</li>
|
||
<li><a href="https://github.com/ng-seed/spa">ng-seed/spa</a> - Seed
|
||
project for Angular apps featuring Webpack, dev/prod modes, DLLs, AoT
|
||
compilation, HMR, SCSS compilation, lazy loading, config, cache, i18n,
|
||
SEO, and TSLint/codelyzer by <span class="citation"
|
||
data-cites="fulls1z3">@fulls1z3</span></li>
|
||
<li><a href="https://github.com/ksiabani/reboard">Reboard</a> - Angular
|
||
4 + Material 2 starter dashboard with ngx-charts, based on
|
||
generator-ngx-rocket (Typescript, SASS, Webpack, Jasmine+Karma,
|
||
Protractor, TSLint, Codelyzer, Stylelint, ngx-translate, Lodash, Angular
|
||
Flex-Layout)</li>
|
||
<li><a
|
||
href="https://github.com/rafaesc/fullstack-graphql-angular">Angular5 +
|
||
Redux + Graphql + MySQL quickstart</a> - Simple Fullstack GraphQL
|
||
Application with Angular CLI + Redux + Express + GraphQL + Sequelize
|
||
(supports MySQL, Postgres, Sqlite and MSSQL).</li>
|
||
<li><a href="https://github.com/naologic/angular5-starter">Angular5 +
|
||
Firebase + Structure</a> - Angular 5 + Firebase + a very good
|
||
router/module structure to make it your own so easy</li>
|
||
<li><a
|
||
href="https://github.com/daixianceng/angular-app-example">angular-app-example</a>
|
||
- Angular latest + material + sass themes + more beautiful features, a
|
||
dashboard app example</li>
|
||
<li><a href="https://github.com/ng-matero/ng-matero">NG-MATERO</a> -
|
||
This Ng-Matero is an Angular admin templete made with Material
|
||
componnets.</li>
|
||
<li><a
|
||
href="https://github.com/TinkoffCreditSystems/angular-open-source-starter">TinkoffCreditSystems/angular-open-source-starter</a>
|
||
- a starter project for creating open-source libraries for Angular</li>
|
||
<li><a
|
||
href="https://github.com/truonghungit/angular-starter">truonghungit/angular-starter</a>
|
||
- 😍 A complete Angular 10, NgRx, Angular CLI & Angular Material
|
||
starter project</li>
|
||
<li><a href="https://github.com/eolinker/eoapi">Eoapi</a> - A
|
||
lightweight, extensible API tool based on Angular and Electron</li>
|
||
<li><a
|
||
href="https://github.com/gdi2290/awesome-angular/edit/gh-pages/README.md"><strong>{{</strong>
|
||
add_your_repo <strong>}}</strong></a></li>
|
||
</ul>
|
||
<hr />
|
||
<h4 id="ionic-in-angular">Ionic in Angular</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">Ionic Framework</a> - Official
|
||
Website for Ionic Framework</li>
|
||
<li><a href="https://github.com/ionic-team/ionic-framework">(Github)
|
||
Ionic Framework</a> - Github Repo of Ionic Framework</li>
|
||
</ul>
|
||
<h5 id="ionic-general-resources">Ionic General Resources</h5>
|
||
<ul>
|
||
<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>
|
||
</ul>
|
||
<hr />
|
||
<h3 id="angular-2-in-dart">Angular 2 in Dart</h3>
|
||
<blockquote>
|
||
<p>Dart is an open-source, scalable programming language, with robust
|
||
libraries and runtimes, for building web, server, and mobile apps.</p>
|
||
</blockquote>
|
||
<h4 id="dart-general-resources">Dart General Resources</h4>
|
||
<ul>
|
||
<li><a href="https://dart.dev/">Dart</a> Official Website for Dart.</li>
|
||
<li><a href="https://github.com/dart-lang">Dart Organization
|
||
(GitHub)</a> Official GitHub Organization for Dart</li>
|
||
<li><a
|
||
href="https://github.com/angulardart-community/website">angulardart-community</a>
|
||
- The next-generation AngularDart documentation website.</li>
|
||
</ul>
|
||
<hr />
|
||
<h3 id="angular-2-in-traceur">Angular 2 in Traceur</h3>
|
||
<blockquote>
|
||
<p>Traceur is a JavaScript.next-to-JavaScript-of-today compiler.</p>
|
||
</blockquote>
|
||
<h4 id="traceur-general-resources">Traceur General Resources</h4>
|
||
<ul>
|
||
<li><a href="https://github.com/google/traceur-compiler">Traceur
|
||
Repository (GitHub)</a> Official GitHub Repo for Traceur.</li>
|
||
</ul>
|
||
<h4 id="traceur-seed-projects">Traceur Seed Projects</h4>
|
||
<ul>
|
||
<li><a href="https://github.com/evanplaice/angular2-es6-seed/">GitHub:
|
||
Angular2 ES6 Seed (Evan Plaice)</a></li>
|
||
<li><a
|
||
href="https://github.com/PatrickJS/awesome-angular/edit/gh-pages/README.md"><strong>{{</strong>
|
||
add_your_repo <strong>}}</strong></a></li>
|
||
</ul>
|
||
<hr />
|
||
<h3 id="angular-2-in-es5">Angular 2 in ES5</h3>
|
||
<blockquote>
|
||
<p>An ECMAScript language that includes structured, dynamic, functional,
|
||
and prototype-based features.</p>
|
||
</blockquote>
|
||
<h5 id="es5-general-resources">ES5 General Resources</h5>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/PatrickJS/awesome-angular/edit/gh-pages/README.md"><strong>{{</strong>
|
||
help_add_resources <strong>}}</strong></a></li>
|
||
</ul>
|
||
<h4 id="es5-seed-projects">ES5 Seed Projects</h4>
|
||
<p><a
|
||
href="https://github.com/islam-muhammad/angular2-es5">angular2-es5-starter-kit</a>
|
||
Angular2 ES5 Starter Kit</p>
|
||
<hr />
|
||
<h4 id="meteor-in-angular-2">Meteor in Angular 2</h4>
|
||
<blockquote>
|
||
<p>Build Realtime Web and Mobile Apps With Angular and Meteor.</p>
|
||
</blockquote>
|
||
<h5 id="meteor-general-resources">Meteor General Resources</h5>
|
||
<ul>
|
||
<li><a href="https://angular-meteor.com/">Angular Meteor</a> Official
|
||
Website for Angular Meteor</li>
|
||
<li><a href="https://www.angular-meteor.com/angular2">Angular 2
|
||
Meteor</a></li>
|
||
</ul>
|
||
<h4 id="meteor-seed-projects">Meteor Seed Projects</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/KyneSilverhide/angular2-meteor-seed">Angular2
|
||
Meteor Seed</a></li>
|
||
<li><a
|
||
href="https://github.com/PatrickJS/awesome-angular/edit/gh-pages/README.md"><strong>{{</strong>
|
||
add_your_repo <strong>}}</strong></a></li>
|
||
</ul>
|
||
<hr />
|
||
<h4 id="angular-2-in-nativescript">Angular 2 in NativeScript</h4>
|
||
<blockquote>
|
||
<p>Build truly native iOS, Android and Windows Phone apps with
|
||
Javascript and CSS. Try NativeScript open-source framework for
|
||
cross-platform development.</p>
|
||
</blockquote>
|
||
<h5 id="nativescript-general-resources">NativeScript General
|
||
Resources</h5>
|
||
<ul>
|
||
<li><a href="https://www.nativescript.org/">NativeScript</a> Official
|
||
Website for NativeScript</li>
|
||
<li><a
|
||
href="https://www.syntaxsuccess.com/viewarticle/using-nativescript-with-angular-2.0">Using
|
||
NativeScript</a></li>
|
||
</ul>
|
||
<h4 id="nativescript-seed-projects">NativeScript Seed Projects</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/NativeScript/sample-Angular2">sample-Angular2</a></li>
|
||
<li><a
|
||
href="https://github.com/NathanWalker/angular-seed-advanced">angular2-seed-advanced</a></li>
|
||
<li><a
|
||
href="https://github.com/PatrickJS/awesome-angular/edit/gh-pages/README.md"><strong>{{</strong>
|
||
add_your_repo <strong>}}</strong></a></li>
|
||
</ul>
|
||
<hr />
|
||
<h4 id="angular-2-in-react-native">Angular 2 in React Native</h4>
|
||
<blockquote>
|
||
<p>React Native enables you to build world-class application experiences
|
||
on native platforms using a consistent developer experience based on
|
||
JavaScript.</p>
|
||
</blockquote>
|
||
<h5 id="react-native-general-resources">React Native General
|
||
Resources</h5>
|
||
<ul>
|
||
<li><a href="https://facebook.github.io/react-native/">React Native</a>
|
||
Official Website for React Native</li>
|
||
</ul>
|
||
<h4 id="react-native-projects">React Native Projects</h4>
|
||
<ul>
|
||
<li><a href="https://github.com/angular/react-native-renderer">Angular 2
|
||
React Native Renderer (GitHub)</a></li>
|
||
</ul>
|
||
<h4 id="react-native-seed-projects">React Native Seed Projects</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/PatrickJS/awesome-angular/edit/gh-pages/README.md"><strong>{{</strong>
|
||
add_your_repo <strong>}}</strong></a></li>
|
||
</ul>
|
||
<hr />
|
||
<h3 id="angular-2-in-scala">Angular 2 in Scala</h3>
|
||
<blockquote>
|
||
<p>General purpose language; multiparadigm (object-oriented, functional,
|
||
concurrent elements); statically typed, type-safe; focus: Web
|
||
services.</p>
|
||
</blockquote>
|
||
<h5 id="scala-general-resources">Scala General Resources</h5>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/PatrickJS/awesome-angular/edit/gh-pages/README.md"><strong>{{</strong>
|
||
help_add_resources <strong>}}</strong></a></li>
|
||
</ul>
|
||
<h4 id="scala-seed-projects">Scala Seed Projects</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/gdi2290/play-angular2">play-angular2</a></li>
|
||
<li><a
|
||
href="https://github.com/PatrickJS/awesome-angular/edit/gh-pages/README.md"><strong>{{</strong>
|
||
add_your_repo <strong>}}</strong></a></li>
|
||
</ul>
|
||
<hr />
|
||
<h3 id="angular-2-components-with-bit">Angular 2 components with
|
||
Bit</h3>
|
||
<blockquote>
|
||
<p>Bit is an open source virtual repository (code base) built to make
|
||
components easily manageable and usable across applications. You can
|
||
quickly export any Angular component from any context while working on
|
||
any project to a bit distributed Scope. Bit’s reusbale component
|
||
environment cuts the overhead of configuring build and test environments
|
||
for exporting every new component. The Scope is a virtual component
|
||
repository which stores, organizes, manages and tests your components.
|
||
Once modeled on a Scope, your components can be easily found and used in
|
||
any Angular application. Components can be organized together and still
|
||
modified and used individually without pulling in entire libraries.</p>
|
||
</blockquote>
|
||
<h5 id="bit-resources">Bit Resources</h5>
|
||
<ul>
|
||
<li><a href="https://github.com/teambit/bit">Bit</a></li>
|
||
<li><a
|
||
href="https://github.com/teambit/bit-javascript">Bit-Javascript</a></li>
|
||
<li><a href="https://bitsrc.io/">bitsrc</a> - Free community hub for
|
||
sharing, managing and finding open source components.</li>
|
||
</ul>
|
||
<hr />
|
||
<h4 id="security">Security</h4>
|
||
<ul>
|
||
<li><a href="https://angular.io/guide/security">Angular.io Security
|
||
Guide</a> - brief security guidance including Preventing cross-site
|
||
scripting (XSS), Sanitization and Content security policy.</li>
|
||
<li>So you thought you were safe using AngularJS? Think again! <a
|
||
href="https://www.owasp.org/images/4/46/OWASPLondon20170727_AngularJS.pdf">Slides</a>,
|
||
<a href="https://www.youtube.com/watch?v=3vuLPzjc4RI">Video</a> - Lewis
|
||
Ardern speaking at OWASP London 2017.</li>
|
||
</ul>
|
||
<h4 id="authentication">Authentication</h4>
|
||
<ul>
|
||
<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 Angular2+</li>
|
||
<li><a
|
||
href="https://github.com/AnthonyNahas/ngx-auth-firebaseui">ngx-auth-firebaseui</a>
|
||
- Angular Material UI component for <code>firebase</code>
|
||
<code>authentication</code></li>
|
||
<li><a
|
||
href="https://github.com/AlexKhymenko/ngx-permissions">ngx-permissions</a>
|
||
- Permission and roles based access control for your angular(angular 2,
|
||
angular 4,5+) applications(AOT, lazy modules compatible)<br />
|
||
</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, Implicit Flow</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/Azure-Samples/ms-identity-javascript-angular-tutorial">ms-identity-javascript-angular-tutorial</a>
|
||
- A chapterwise tutorial that will take you through the fundamentals of
|
||
modern authentication with Microsoft identity platform using MSAL
|
||
Angular v2.</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/auth0/auth0-angular">auth0-angular</a> -
|
||
Auth0 SDK for Angular Single Page Applications</li>
|
||
<li><a href="https://github.com/nestjs/ng-universal">ng-universal</a> -
|
||
Angular Universal module for Nest framework (node.js)</li>
|
||
<li><a href="https://github.com/angular/angularfire">angularfire</a> -
|
||
Angular + Firebase</li>
|
||
<li><a
|
||
href="https://supabase.com/docs/guides/getting-started/tutorials/with-angular">supabase</a>
|
||
- Build a User Management App with Angular.<br />
|
||
</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://docs.amplify.aws/angular/">amplify</a> - AWS
|
||
Amplify streamlines full-stack app development. With its libraries, CLI,
|
||
and services, you can easily connect your frontend to the cloud for
|
||
authentication, storage, APIs, and more.</li>
|
||
</ul>
|
||
<h4 id="ngrx">NgRx</h4>
|
||
<ul>
|
||
<li><a href="https://ngrx.io/">ngrx</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 <span class="citation"
|
||
data-cites="ngrx">@ngrx</span> store and local storage</li>
|
||
<li><a href="https://timdeschryver.dev/blog?q=NgRx">Tim Deschryver
|
||
Blog</a> - Excellent NgRx articles from a core maintainer.</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, nrwl/nx 17</li>
|
||
</ul>
|
||
<hr />
|
||
<p>enjoy — <a
|
||
href="https://twitter.com/PatrickJS__"><strong>PatrickJS</strong></a></p>
|
||
<hr />
|
||
<h2 id="license">License</h2>
|
||
<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>
|