👋Welcome to the 20th Angular Addicts Issue

Welcome to the twentieth edition of the Angular Addicts Newsletter, a curated monthly digest of Angular resources that caught my eye. (You can check out the 19th, 18th, and 17th issues if you missed them.)

💎Top Angular Reads from November 2023

📰The Complete Guide to Lazy Loading with Angular @defer

Angular 17 brought the @defer control block, which allows for lazy-loading of the block's contents. This lazy-loading extends to all the block's dependencies as well, meaning components, directives, and pipes loaded within it are deferred too. In this detailed guide, Tomas Trajan breaks down the mechanics of this new feature, the various trigger types and their appropriate use cases, the purpose of @placeholder, @loading & @error blocks, as well as the inner workings of prefetching.

📰Unit Testing Deferrable Views using Angular Testing Library

With the release of Testing Library v14.5.0, two new functions have been introduced to facilitate unit testing of the @defer blocks: renderDeferBlock and deferBlockStates. In this guide, Tim Deschryver walks through using these functions to write comprehensive unit tests for your @defer blocks with ease.

📰NGRX Signal Store Deep Dive: Flexible and Type-Safe Custom Extensions

Manfred Steyer has published a three-part series dedicated to NGRX Signal Stores:

In the final installment of his series (NGRX Signal Store Deep Dive: Flexible and Type-Safe Custom Extensions), he demonstrates the creation of a custom Signal Store feature. This feature helps monitor the state of an HTTP request, with configurable property and signal names. The implementation is fully type-safe, as Manfred leverages—and thoroughly explains—the patterns used within the Signal Store itself, as developed by the NGRX team.

📰The Inner Workings of Angular Dependency Injection

Thomas Laforge offers a comprehensive look into Angular's dependency injection system, covering:

  • The fundamental concept of dependency injection
  • The distinction between Angular's two injector types: EnvironmentInjector and NodeInjector
  • The construction of injector trees
  • The methods for providing injectables at both the root and component levels

📰Implementing the Onion Architecture in Angular Projects

In his article, Jérôme Navez starts by outlining the principles behind the Onion architecture and then shows how to apply them to Angular applications. He breaks down frontend projects into four key segments:

  • The Views: The components that users interact with
  • The Clients: The modules for communication with APIs
  • The State: The central source of truth for the application
  • The Domain: The core containing the business logic

He details the contents and responsibilities of each segment, accompanied by source code examples for clarity.

📰It Turns Out You've Been Building Angular Apps Incorrectly!

In this tutorial, Thamodi Wickramasinghe starts by introducing the fundamentals of the microfrontend architecture, then proceeds to construct a payment application using Angular and Module Federation. The app is structured with a shell and two separate microfrontends: one for payments and another for billing.

👨‍💻Meet the Author

I'm Gergely Szerovay, serving as a frontend development chapter lead. My passion lies in both teaching and learning Angular. I spend time every day consuming Angular-related content, from articles and podcasts to conference presentations.

The Angular Addict Newsletter was established to share the best resources I discover each month. Whether you're a seasoned Angular enthusiast or just starting out, there's something here for you.

Beyond the newsletter, I manage a publication appropriately named Angular Addicts, which houses the most informative and interesting resources I find. If you're interested in contributing as a writer, don't hesitate to reach out.

Join me in mastering Angular! Subscribe here 🔥

Connect with me on Substack, Medium, Dev.to, Twitter or LinkedIn for more Angular insights!

🕹️Earlier Issues

If you've missed any prior newsletters, you can catch up here. The most recent three are:

📨 Share Your Angular Finds

Have you come across or authored an engaging Angular article, tweet, or other resource lately? Feel free to share it in the comments section or contact me directly on Twitter! It could be featured in an upcoming issue of Angular Addicts!