Signals and State Management: Top Angular Resources from 2023

Here's my curated selection of standout Angular articles and videos from 2023. Whether you're sharpening your existing skills or exploring the latest developments, these resources offer valuable insights.

📰NGRX Signal Store

Manfred Steyer has put together a four-part series exploring NGRX Signal Stores:

📰A sweet spot between signals and observables

Enea Jahollari and Chau Tran demonstrate a function they created for integrating Observables and Signals. This tool functions as a refreshed combineLatestObject(), accepting both Observables and Signals, then refining the combined output through an NgRxpipe().

📰Signals vs RxJS

Mike Pearson has created a four-article guide to help determine when to choose RxJs over Angular Signals:

The first two installments compare RxJs and Signals for handling both synchronous and asynchronous reactivity. The third piece promotes the "auto-signal pattern" as an alternative to toSignal(), offering the advantage of pairing RxJS streams with Signals while preserving RxJS capabilities for automatic:

  • cleanup
  • reset and re-fetching
  • request cancellation

The final article in the series shares Mike's findings from converting around 1800 lines of existing code over to signals.

📰Managing RxJS Traffic with Signals and Suspensify

Angular's toSignal() function is useful for turning observables into Signals, but it has limitations with observables that lack an initial value or emit errors. Younes Jaaidi introduces the suspensify() operator as a solution. This operator transforms an observable so it consistently emits an initial value and suppresses errors, and it's available in the @jscutlery/operators package.

📰SPARTAN. Type-safe Angular full-stack development powered by Analog

Robin Goetz provides a hands-on tutorial for building a simple app with the SPARTAN stack. This collection of technologies includes Supabase, Prisma, Analog, tRPC, Tailwind, Angular, and Nx.

📰Getting Started with spartan/ui - Shadcn-like UI Components for Angular

Robin Goetz presents spartan/ui, a new set of Angular UI primitives designed to be accessible and unstyled from the start. Drawing inspiration from React's RadixUI and shadcn projects, spartan/ui is separated into two main components:

  • The spartan/ui/brain package provides a set of flexible, unstyled building blocks that you can adapt to fit your specific design and functionality needs.
  • The spartan/ui/helm package offers ready-made styles using TailwindCSS and CSS variables. These can be copied directly into your project for complete control over the code, design, and user experience.

📰NgRx Best Practices Series: 4. Facade Pattern

In the fourth part of his NgRx Best Practices Series, Rainer Hahnekamp delves into the Facade Pattern. He explains how this pattern isolates stores from the rest of the app, simplifying tasks like replacing, refactoring, or unit testing your NgRx code.

The earlier installments in the series cover:

Rainer is also the creator of ng-news, a weekly newsletter that condenses the latest Angular community news into a 100-second read.

📰How to migrate Angular CoreModule to standalone APIs

Tomas Trajan walks through the process of converting an Angular CoreModule (or any Angular module) to use standalone APIs. The guide covers essential steps like:

  • How to register providers
  • How to prevent providers from being injected multiple times
  • How to manage parametrization and options
  • How to execute logic during injector initialization

📰Microtask Queue + RxJS + Angular

Daniel Glejzner clarifies the concepts of microtask and macrotask queues, and explains how RxJs processes async observable values. He goes on to show how and when Zone.js triggers Angular's change detection system to refresh the UI.

📰Mastering Angular: Essential Code Organization Principles

This is the seventh entry in OZ’s “Mastering Angular” series. Here, he helps you sidestep common coding mistakes by covering these topics:

  • Pure Functions
  • Immutability
  • Visibility and mutability modifiers
  • Type Aliases
  • Branded Types
  • Typed Functions
  • Composition over Inheritance

📰Supabase And Angular: A Powerful Combination For Building Web Applications

Supabase, an open-source Firebase alternative built on PostgreSQL, is the focus of Christian Lüdemann’s tutorial. He demonstrates building a to-do app with an Angular frontend and Supabase backend, covering account setup, database schema design, Angular app creation, and the essentials of a production-ready Supabase configuration.

📰Lazy loading services in Angular. What?! Yes, we can.

Enea Jahollari explains a technique for lazy-loading service instances using dynamic import syntax combined with injectable decorators.

📰Angular Testing in 2023 - Past, Present, and Future

With Angular 16, Karma has been deprecated and Jest support is now experimental. Rainer Hahnekamp addresses these changes and clarifies the current state of testing within the Angular ecosystem.

📰Angular Interceptors Unleashed: Solving Complex Scenarios with Ease. Practical Use Cases and Examples

Astrit Shuli uses practical examples to illustrate how Angular HTTP request interceptors function. These interceptors can examine and alter outgoing HTTP requests and incoming responses. He covers a wide array of common use cases, including:

  • Authentication Interceptor
  • Error Handling Interceptor
  • Logging Interceptor
  • Caching Interceptor
  • Headers Interceptor
  • Loading Indicator Interceptor
  • Timeout Interceptor
  • Base URL Interceptor
  • Retry Interceptor
  • Offline Mode Interceptor
  • JWT Refresh Token Interceptor
  • Request Timing Interceptor
  • Localization Interceptor
  • Content Security Policy (CSP) Interceptor
  • Compression Interceptor

📰How Angular Dependency Injection works under the hood

Thomas Laforge explores the inner workings of Angular's dependency injection system in depth. He answers key questions:

  • The fundamentals of dependency injection
  • The differences between the two injector types: EnvironmentInjector and NodeInjector
  • How the injector trees are structured
  • How to provide injectables at the root and component levels

📰Making Angular Custom Form Components Easier to Work With

Wayne Leung compares different methods for building custom form components:

  • Angular's Template driven forms and Reactive forms
  • Native script's BaseValueAccessor
  • ngspot/ng-superclass: a library designed to make writing reactive components and custom controls with ControlValueAccessor much simpler.
  • Angora Forms: an emerging library that offers a new abstraction for custom form components

📰Angular and tRPC

Kevin Kreuzer builds a full-stack application with a Node.js backend and an Angular frontend, using tRPC for communication.

tRPC is a minimal Remote Procedure Call framework. Its main draw is enabling fully type-safe APIs without needing schemas or code generation, by allowing the frontend to reuse type definitions directly from the backend.

📰The New NgRx

NgRX has seen some major upgrades recently. Armen Vardanyan provides a detailed look at several of these, including:

  • Standalone APIs
  • Action groups
  • Features
  • Extra selectors on features
  • Functional effects

📰Angular Developer Survey 2022 Results Summary

With nearly 12,000 developers involved, Minko Gechev summarizes the findings of the Angular Developer Survey and connects them to Angular’s official roadmap.

🎥 Conference talks and event recordings

📅 Angular at Google I/O 2023

All Angular sessions from Google I/O 2023 were recorded and posted to this playlist. The lineup includes:

📅 ng-conf 2023

Selected presentations from ng-conf 2023 are now up on their YouTube channel:

📅 WebExpo 2023

WebExpo holds a special place among my favorite events, and Angular Addicts serves as a community partner for the conference.

As the largest internet-focused conference in Central Europe, WebExpo draws professionals who want to stay current with industry trends.

Talk recordings from the event can be found on SlidesLive.

I've written up my personal highlights from the conference in this recap.

📅 Angular Tiny Conf 2023

A full 12-hour recording of Angular Tiny Conf was made publicly available on YouTube.

📅 NG-BE 2023

Held over two days in Ghent, Belgium, NG-BE gathers Angular developers and specialists from across the globe to exchange insights, updates, and perspectives on the framework.

Session recordings from NG-BE 2023 are compiled in this YouTube playlist.

✍️ About the author

I'm Gergely Szerovay, a frontend development chapter lead. Sharing knowledge about Angular is something I'm deeply passionate about, and I make it a habit to explore Angular-related material daily — whether that's articles, podcasts, or conference talks.

The Angular Addict Newsletter is my way of curating the most valuable resources I encounter each month, delivered straight to your inbox. Whether you're just starting out or you're a seasoned Angular enthusiast, there's something in it for you.

I also run a companion publication, aptly named Angular Addicts, which serves as a hub for the most insightful resources I've found. If you're interested in contributing as a writer, feel free to reach out.

Ready to dive deeper into Angular? Subscribe to the newsletter 🔥

You can also follow me on Substack, Medium, Dev.to, Twitter, or LinkedIn for more Angular content.