Gergely Szerovay for This is Angular

Posted on Jan 15 • Originally published at angularaddicts.com

The best of Angular: a collection of my favorite resources of 2023

#angular #typescript #ngrx #javascript

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 wrote a four-part series about NGRX Signal Stores:

📰A sweet spot between signals and observables

Enea Jahollari and Chau Tran 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 NgRxpipe().

📰Signals vs RxJS

Mike Pearson wrote a four-piece article series to show us when we should prefer RxJs and when Angular Signals:

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

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 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.

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

In his step-by-step tutorial, Robin Goetz creates a simple application using the SPARTAN tech stack. SPARTAN consists of Supabase, Prisma, Analog, tRPC, Tailwind, Angular, and Nx.

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

Robin Goetz introduces spartan/ui, an innovative collection of Angular UI primitives that are un-styled and accessible by default. It is inspired by the RadixUI and shadcn 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

Rainer Hahnekamp 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:

Rainer is also the author of ng-news, it collects the latest updates from the Angular community in 100 seconds every week.

📰How to migrate Angular CoreModule to standalone APIs

In his tutorial, Tomas Trajan 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

In his article, Daniel Glejzner 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

This is the seventh part of OZ’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

Supabase is an open-source Firebase alternative based on PostgreSQL. Christian Lüdemann 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.

In his article, Enea Jahollari 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

Angular 16 has deprecated Karma and introduced Jest in experimental mode. These changes raise a lot of questions. Rainer Hahnekamp explains this situation and the current state of testing in Angular.

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

Astrit Shuli 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

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: 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

Wayne Leung compares the following approaches for creating custom form components:

Angular's Template driven forms and Reactive forms
Native script's BaseValueAccessor
ngspot/ng-superclass: a library for simplifying writing reactive Angular components/directives and custom controls that implement ControlValueAccessor
Angora Forms: a new custom form component abstraction library

📰Angular and tRPC

Kevin Kreuzer implements a node.js-based backend and an Angular frontend using tRPC.

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

NgRX received several significant updates recently. Armen Vardanyan explains the following changes in detail:

Standalone APIs
Action groups
Features
Extra selectors on features
Functional effects

📰Angular Developer Survey 2022 Results Summary

Nearly 12k developers participated in the Angular Developer Survey, Minko Gechev’s article summarizes the results and how these are reflected in Angular's roadmap.

📢Conference reports and recordings

📅Angular at Google I/O 2023

The recordings of the Angular-related talks of Google I/O 2023 are available on this playlist:

Developer keynote
What’s new in Angular (Minko Gechev, Madleina Scheidegger)
Rethinking reactivity with Angular Signals (Emma Twersky, Simona Cotin)
Getting started with Angular Signals (Emma Twersky, Alex Rickabaugh)

📅ng-conf 2023

The recordings of some talks of ng-conf 2023 are available on their channel:

📅WebExpo 2023

WebExpo 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.

I summarized my favorite moments here.

📅Angular Tiny Conf 2023

Angular Tiny Conf shared its 12 hour recording on YouTube.

📅NG-BE 2023

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 are available on this playlist.

👨‍💻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!

Top comments (2)

João Angelo • Jan 15

Hi Gergely Szilvay,
These are valuable tips!
Thanks for sharing

Maximilian-Kay • Jan 16

Thank you for sharing, bookmarked this and can't wait to read through the sources!

DEV Community