The best of Angular: a collection of my favorite resources of 2023
Tags: angular, typescript, ngrx, javascript
Published: 2024-01-15 08:14:09

---
title: The best of Angular: a collection of my favorite resources of 2023
published: true
description: Learn about what happened in the world of Angular last year
tags: #angular #typescript #ngrx #javascript
canonical_url: https://www.angularaddicts.com/p/the-best-of-angular-2023
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vi93spwz0ryxvvbadm9w.png
# Use a ratio of 100:42 for best results.
# published_at: 2024-01-15 08:10 +0000
---


I collected the best Angular articles and videos of 2023, so if you are looking to develop your Angular skills or get up to speed with some of the newest solutions, check out these insightful pieces.


### 📰NGRX Signal Store

[Manfred Steyer](https://twitter.com/ManfredSteyer) wrote a four-part series about NGRX Signal Stores:



* [The new NGRX Signal Store for Angular: 3+n Flavors](https://www.angulararchitects.io/en/blog/the-new-ngrx-signal-store-for-angular-2-1-flavors/)
* [Smarter, Not Harder: Simplifying your Application With NGRX Signal Store and Custom Features](https://www.angulararchitects.io/en/blog/smarter-not-harder-simplifying-your-application-with-ngrx-signal-store-and-custom-features/)
* [NGRX Signal Store Deep Dive: Flexible and Type-Safe Custom Extensions](https://www.angulararchitects.io/en/blog/ngrx-signal-store-deep-dive-flexible-and-type-safe-custom-extensions/)
* [The NGRX Signal Store and Your Architecture](https://www.angulararchitects.io/en/blog/the-ngrx-signal-store-and-your-architecture/)

---


### 📰[A sweet spot between signals and observables](https://itnext.io/a-sweet-spot-between-signals-and-observables-a3c9620768f1)

[Enea Jahollari](https://twitter.com/Enea_Jahollari) and [Chau Tran](https://twitter.com/Nartc1410) show us how they implemented a function that helps combine Observables and Signals. It's like a new version of `combineLatestObject()` that can accept both Observables and Signals as an argument, and post-processes the combined result through an NgRx` pipe()`.

---


### 📰Signals vs RxJS

[Mike Pearson](https://twitter.com/mfpears) wrote a four-piece article series to show us when we should prefer RxJs and when Angular Signals:



* [Signals make Angular MUCH easier](https://dev.to/mfp22/signals-make-angular-much-easier-3k9)
* [RxJS can save your codebase](https://dev.to/mfp22/rxjs-can-save-your-codebase-49fi)
* [Introducing the auto-signal pattern](https://dev.to/mfp22/introducing-the-auto-signal-pattern-1a5h)
* [10 Tips for Scaling Signals](https://dev.to/mfp22/10-tips-for-scaling-signals-1nap)

In the first two parts of the series, he compares RxJs and Signals in case of using them for synchronous and asynchronous reactivity. In the third article, he recommends us to use the "auto-signal pattern", which has some benefits over `toSignal()`. This pattern enables us to connect RxJS streams with Signals without losing the ability of RxJS streams to automatically:



* clean up
* reset and re-fetch, and
* cancel requests

In the fourth article Mike shares the lessons he learned during he converted about 1800 lines of code to signals.

---


### 📰[Managing RxJS Traffic with Signals and Suspensify](https://dev.to/this-is-angular/managing-rxjs-traffic-with-signals-and-suspensify-pp)

Angular contains a new `toSignal()` function that can convert observables to Signals, but it doesn't handle observables well without initial values or emitted errors. [Younes Jaaidi](https://www.linkedin.com/in/yjaaidi/) shows us how the `suspensify()` operator can help us solve these issues by producing an observable that will always have an initial value and that never throws an error. It's a part of the [@jscutlery/operators package.](https://github.com/jscutlery/devkit/tree/main/packages/operators)

---

### 📰[SPARTAN. Type-safe Angular full-stack development powered by Analog](https://dev.to/this-is-angular/spartan-type-safe-angular-full-stack-development-powered-by-analog-17dm)

In his step-by-step tutorial, [Robin Goetz](https://twitter.com/goetzrobin) creates a simple application using the SPARTAN tech stack. SPARTAN consists of [Supabase](https://supabase.com/), [Prisma](https://www.prisma.io/), [Analog](https://analogjs.org/), [tRPC](https://trpc.io/), [Tailwind](https://tailwindcss.com/), [Angular](https://angular.io/), and [Nx](https://nx.dev/).

---


### 📰[Getting Started with spartan/ui - Shadcn-like UI Components for Angular](https://dev.to/this-is-angular/getting-started-with-spartanui-shadcn-like-ui-components-for-angular-8df)

[Robin Goetz](https://twitter.com/goetzrobin) introduces [spartan/ui](https://www.spartan.ng/documentation/installation), an innovative collection of Angular UI primitives that are un-styled and accessible by default. It is inspired by the [RadixUI](https://www.radix-ui.com/) and [shadcn](https://ui.shadcn.com/) projects of the React ecosystem, and it comes in two parts:



* Through **spartan/ui/brain**, they offer a versatile collection of un-styled UI building blocks that can be easily tailored to match your project's distinct visual and functional preferences.
* With **spartan/ui/helm**, they provide pre-designed styles built on TailwindCSS and CSS variables. You can copy these into your project so you retain full control over their code, appearance, and overall experience.

---


### 📰[NgRx Best Practices Series: 4. Facade Pattern](https://www.rainerhahnekamp.com/en/ngrx-best-practices-series-4-facade-pattern/)

[Rainer Hahnekamp](https://twitter.com/rainerhahnekamp) released his fourth article of his NgRx Best Practices Series, explaining the Facade Pattern. This pattern decouples the stores from the rest of our application, so replacing, refactoring or unit testing our NgRx code becomes easier.

The previous articles and videos in his series:



* [NgRx Best Practices Series: 0. Introduction](https://www.rainerhahnekamp.com/en/ngrx-best-practices-series-0-introduction/)
* [NgRx Best Practices Series: 1. Cache & LoadStatus](https://www.rainerhahnekamp.com/en/ngrx-best-practices-series-1-cache-loadstatus/)
* [NgRx Best Practices Series: 2. Modularity](https://www.rainerhahnekamp.com/en/ngrx-best-practices-series-2-modularity/)
* [NgRx Best Practices - Episode 3: Routing & other Deferrals (Video)](https://www.youtube.com/watch?v=IpC-s8tGALo)

Rainer is also the author of [ng-news](https://twitter.com/_ng_news), it collects the latest updates from the Angular community in 100 seconds every week.

---


### 📰[How to migrate Angular CoreModule to standalone APIs](https://angularexperts.ch/blog/angular-core-module-standalone-migration)

In his tutorial, [Tomas Trajan](https://twitter.com/tomastrajan) demonstrates how to migrate an Angular CoreModule (or any other Angular module) to standalone APIs. He explains how to:



* Register providers
* Prevent multiple injection of a provider
* Handle parametrization and options
* Run a logic when the injector is initialized

---


### 📰[Microtask Queue + RxJS + Angular](https://dev.to/this-is-angular/microtask-queue-rxjs-angular-38ah)

In his article, [Daniel Glejzner](https://twitter.com/DanielGlejzner) explains the difference between microtask and macrotask queues, and how the async observable values are processed in RxJs. Then he explains how and when Zone.js triggers Angular's change detection to update the UI.

---


### 📰[Mastering Angular: Essential Code Organization Principles](https://itnext.io/mastering-angular-essential-code-organization-principles-c09838dea6e2)

This is the seventh part of [OZ](https://medium.com/u/ec188195efcc)’s “Mastering Angular” article series. In this article he helps us prevent mistakes that are hard to fix later by explaining the following concepts: 



* 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](https://christianlydemann.com/supabase-and-angular-a-powerful-combination-for-building-web-applications/)

[Supabase](https://supabase.com/) is an open-source Firebase alternative based on PostgreSQL. [Christian Lüdemann](https://medium.com/u/f39d2b6cfa7f) showcases us how to create a to-do app with a Supabase backend and Angular frontend: he sets up a Supabase account, creates the database, builds the Angular app and explains how a production Supabase setup works.

---


### 📰[Lazy loading services in Angular. What?! Yes, we can.](https://itnext.io/lazy-loading-services-in-angular-what-yes-we-can-cfbaf586d54e)

In his article, [Enea Jahollari](https://medium.com/u/eb2c15cb2c38) shows us how to use the dynamic import syntax and injectable decorators for lazy loading service instances.

---


### 📰[Angular Testing in 2023 - Past, Present, and Future](https://dev.to/this-is-angular/angular-testing-in-2023-past-present-and-future-j5m)

Angular 16 has deprecated Karma and introduced Jest in experimental mode. These changes raise a lot of questions. [Rainer Hahnekamp](https://twitter.com/rainerhahnekamp) explains this situation and the current state of testing in Angular.

---


### 📰[Angular Interceptors Unleashed: Solving Complex Scenarios with Ease. Practical Use Cases and Examples](https://blog.stackademic.com/angular-interceptors-unleashed-solving-complex-scenarios-with-ease-b1108fb1846e)

[Astrit Shuli](https://twitter.com/itsastritshuli) demonstrates by examples how Angular HTTP request interceptors work. These interceptors can intercept and modify the HTTP requests and the received responses. Astrit shows us examples for their most common use cases:



* 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](https://medium.com/ngconf/how-angular-dependency-injection-works-under-the-hood-cc210f7040bd)

[Thomas Laforge](https://twitter.com/laforge_toma) 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: `EnvironmentInjector` and `NodeInjector`
* How the injector trees are created
* How to provide injectables on root and component level

---


### 📰[Making Angular Custom Form Components Easier to Work With](https://medium.com/@wayneleung_2900/making-angular-custom-form-components-easier-to-work-with-e2f7ace48cb2)

[Wayne Leung](https://www.linkedin.com/in/wayne-leung-1242422a/) compares the following approaches for creating custom form components:



* Angular's Template driven forms and Reactive forms
* Native script's BaseValueAccessor
* [ngspot/ng-superclass](https://www.npmjs.com/package/@ngspot/ng-superclass): a library for simplifying writing reactive Angular components/directives and custom controls that implement ControlValueAccessor
* [Angora Forms](https://www.angoraforms.com/): a new custom form component abstraction library

---


### 📰[Angular and tRPC](https://kevinkreuzer.medium.com/angular-and-trpc-a48c2fafd17e)

[Kevin Kreuzer](https://medium.com/u/6cd4fff6b841) implements a node.js-based backend and an Angular frontend using [tRPC](https://trpc.io/). 

tRPC is a lightweight Remote Procedure Call framework, it allows you to build and consume fully typesafe APIs without schemas or code generation by reusing the backend’s type definition from the frontend.

---


### 📰[The New NgRx](https://dev.to/this-is-angular/the-new-ngrx-lf1)

NgRX received several significant updates recently. [Armen Vardanyan](https://dev.to/armandotrue) explains the following changes in detail:



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


### 📰[Angular Developer Survey 2022 Results Summary](https://blog.angular.io/angular-developer-survey-2022-results-summary-d17c88f62690)

Nearly 12k developers participated in the Angular Developer Survey, [Minko Gechev](https://twitter.com/mgechev)’s article summarizes the results and how these are reflected in Angular's roadmap.

---


## 📢Conference reports and recordings


### 📅[Angular at Google I/O 2023](https://www.youtube.com/playlist?list=PL1w1q3fL4pmjyUKydoTC3lp9cuWfLRdsK)

The recordings of the Angular-related talks of Google I/O 2023 are available on this [playlist](https://www.youtube.com/playlist?list=PL1w1q3fL4pmjyUKydoTC3lp9cuWfLRdsK):



* Developer keynote
* What’s new in Angular ([Minko Gechev](https://twitter.com/mgechev), Madleina Scheidegger)
* Rethinking reactivity with Angular Signals ([Emma Twersky](https://twitter.com/twerske), [Simona Cotin](https://twitter.com/simona_cotin))
* Getting started with Angular Signals ([Emma Twersky](https://twitter.com/twerske),[ Alex Rickabaugh](https://twitter.com/synalx))

---


### 📅[ng-conf 2023](https://ng-conf.org/)

The recordings of some talks of ng-conf 2023 are available on their [channel](https://www.youtube.com/@ngconfonline/videos):



* [Angular Keynote | Minko Gechev & Jeremy Elbourn](https://www.youtube.com/watch?v=D3sEqH9MwEE)
* [Superpowers with Signals | Emma Twersky & Alex Rickabaugh](https://www.youtube.com/watch?v=BBhJJ0XJkfU)
* [Faster apps with Angular SSR | Mark Thompson & Jessica Janiuk](https://www.youtube.com/watch?v=rnvKzwzkEuI)
* [Angular Team Panel Q&A](https://www.youtube.com/watch?v=ll-fsZNhSTY)

---


### 📅[WebExpo 2023](https://webexpo.net/)

[WebExpo](https://webexpo.net/) is one of my favorite conferences, and Angular Addicts is a community partner of the event. 

WebExpo is the largest conference in Central Europe for anyone whose business relates to the internet and who’d want to keep up-to-date.

They shared the recordings of the presentations on [SlidesLive](https://slideslive.com/webexpo).

I summarized my favorite moments [here](https://levelup.gitconnected.com/webexpo-2023-a-summary-from-a-front-end-developers-perspective-d06b426b66ba).

---


### 📅[Angular Tiny Conf 2023](https://www.angulartinyconf.com/)

[Angular Tiny Conf](https://www.angulartinyconf.com/) shared its 12 hour recording on [YouTube](https://www.youtube.com/watch?v=fs26vhD330U).

---


### 📅[NG-BE 2023](https://ng-be.org/)

NG-BE is a 2-day event in Ghent, Belgium, that brings together Angular developers and experts from all over the world to share ideas, news and opinions about Angular.

The recordings of [NG-BE 2023](https://ng-be.org/) are available on this [playlist](https://www.youtube.com/playlist?list=PL9pV_RwZceNgQS7jhRYTQ4mEdv4uzanq7).

---

## 👨‍💻About the author

My name is [Gergely Szerovay](https://www.linkedin.com/in/gergelyszerovay/), 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](https://angularaddicts.com/). 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](https://www.angularaddicts.com/) 🔥

Follow me on [Substack](https://www.angularaddicts.com/), [Medium](https://medium.com/@GergelySzerovay), [Dev.to](https://dev.to/gergelyszerovay), [Twitter](https://twitter.com/GergelySzerovay) or [LinkedIn](https://www.linkedin.com/in/gergelyszerovay/) to learn more about Angular!