👋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)