đź‘‹Hey fellow Angular Addict
This is the 20th issue of the Angular Addicts Newsletter, a monthly collection of carefully selected Angular resources that got my attention. (Here are the 19th, 18th, and 17th issues.)
đź’ŽAngular Gems of November, 2023
đź“°Total guide to lazy loading with Angular @defer
Angular 17 introduced a @defer control block enabling lazy-loading of the block's content. Lazy-loading also applies to the dependencies of the content of the block: all the components, directives and pipes will be lazy-loaded, too. In his in-depth tutorial, Tomas Trajan explains how this new feature works, how and when to use the different trigger types, what are the @placeholder, @loading & @error blocks, and how prefetching works.
đź“°Testing Deferrable Views with Angular Testing Library
Testing Library v14.5.0 has two new functions supporting the unit testing of the new @defer blocks: renderDeferBlock and deferBlockStates. In this tutorial, Tim Deschryver shows us how to use these new functions to easily cover the @defer blocks with unit tests.
đź“°NGRX Signal Store Deep Dive: Flexible and Type-Safe Custom Extensions
Manfred Steyer wrote a three-part series about NGRX Signal Stores:
- The new NGRX Signal Store for Angular: 3+n Flavors
- Smarter, Not Harder: Simplifying your Application With NGRX Signal Store and Custom Features
- NGRX Signal Store Deep Dive: Flexible and Type-Safe Custom Extensions
In the latest article of his series (NGRX Signal Store Deep Dive: Flexible and Type-Safe Custom Extensions), he shows us how to implement a custom Signal Store feature. The feature helps us track a HTTP request state, with configurable property and signal names. The implemented function is type-safe, as Manfred uses (and also explains) patterns from the Signal Store implementation (created by the NGRX team).
đź“°How Angular Dependency Injection works under the hood
Thomas Laforge takes a deep dive into Angular's dependency injection system, he explains:
- What is dependency injection
- What's the difference between Angular's two injector types:
EnvironmentInjectorandNodeInjector - How the injector trees are created
- How to provide injectables on root and component level
đź“°Applying the Onion Architecture to Angular Projects
In his blog post, JĂ©rĂ´me Navez explains the theory behind the Onion architecture, then applies it to Angular applications. He defines four big parts in frontend projects:
- The Views: Components displayed to the user
- The Clients used to communicate with APIs;
- The State: our single source of truth;
- The Domain, that contains the logic
He explains what these parts contain and also provides source code examples.
📰You’ve Been Building Angular Apps Wrong!
In this tutorial, Thamodi Wickramasinghe explains to us the basics of the microfrontend architecture, then shows us how to build a payment based application with Angular and Module Federation, containing a shell, and two microfronteds: a payment and a billing app.
👨‍💻About the author
My name is Gergely Szerovay, I work as a frontend development chapter lead. Teaching (and learning) Angular is one of my passions. I consume content related to Angular on a daily basis — articles, podcasts, conference talks, you name it.
I created the Angular Addict Newsletter so that I can send you the best resources I come across each month. Whether you are a seasoned Angular Addict or a beginner, I got you covered.
Next to the newsletter, I also have a publication called — you guessed it — Angular Addicts. It is a collection of the resources I find most informative and interesting. Let me know if you would like to be included as a writer.
Let’s learn Angular together! Subscribe here 🔥
Follow me on Substack, Medium, Dev.to, Twitter or LinkedIn to learn more about Angular!
🕹️Previous issues
If you missed the previous issues of the newsletter, you can read them here, these are the latest 3 issues:
- Angular Addicts #19: Angular 17, NX 17, Storybook 7.5 & more
- Angular Addicts #18: Angular 17's New control flow and View transitions, Incremental static regeneration & more
- Angular Addicts #17: Angular v16.2, Combining Signals and Observables & more
📨 Submit your Angular resource
Have you found or written an interesting Angular-related article, tweet or other resource lately? Please let me know here in the comments or send me a DM on Twitter! I might feature it in the next Angular Addicts issue!
Top comments (0)