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:
- 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
- The NGRX Signal Store and Your Architecture
đź“°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:
- Signals make Angular MUCH easier
- RxJS can save your codebase
- Introducing the auto-signal pattern
- 10 Tips for Scaling 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:
- NgRx Best Practices Series: 0. Introduction
- NgRx Best Practices Series: 1. Cache & LoadStatus
- NgRx Best Practices Series: 2. Modularity
- NgRx Best Practices - Episode 3: Routing & other Deferrals (Video)
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:
EnvironmentInjectorandNodeInjector - 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:
- Angular Keynote | Minko Gechev & Jeremy Elbourn
- Superpowers with Signals | Emma Twersky & Alex Rickabaugh
- Faster apps with Angular SSR | Mark Thompson & Jessica Janiuk
- Angular Team Panel Q&A
đź“…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)
Hi Gergely Szilvay,
These are valuable tips!
Thanks for sharing
Thank you for sharing, bookmarked this and can't wait to read through the sources!