I curated the finest Angular writing from 2024 to help you sharpen your skills and stay current with the latest approaches. The pieces below cover releases, features, and architectural patterns that shaped the framework this year.

📢New Angular versions released in 2024

💎New Angular features

📰Manfred Steyer's Signals article series

Manfred Steyer explored signals in depth through a six-part series. Each installment tackles a distinct angle on the subject.

📰Replace your @Input setters with input() signals

Matthieu Riegler's article points out the downsides of relying on @Input setters in Angular. He then demonstrates why switching to input() signals paired with effect() gives you a smoother, more consistent experience without the glitches you might see otherwise.

📰 Everything you need to know about the resource API

This guide from Enea Jahollari walks through a set of practical scenarios:

  • Updating local data via the resource API
  • Loading and refreshing data
  • Designing reusable resources
  • Handling data loading with Observables and the rxResource function

📰Exploring Angular’s New @let Syntax: Enhancing Template Variable Declarations

After the Angular team merged the PR introducing the @let syntax, developers gained the ability to declare local variables directly inside templates. Netanel Basal's post breaks down the purpose of this feature and offers guidance on how to adopt it.

📰Angular Forms new unified control state change events

Angular 18 added a unified control state change event system to its Reactive Forms. The AbstractControl class — the parent for FormControl, FormGroup, and FormArray — now exposes a new events: Observable<ControlEvent<TValue>> property. This observable fires whenever there's a change in value, status, pristine, or touched state. Davide Passafaro's article begins with the fundamentals of Reactive Forms, covering template binding, validation, and the disabled state. From there, he moves on to demonstrating how the new events observable can be used to monitor a form's overall state.

📰 Angular 19: linkedSignal

With Angular 19 comes the linkedSignal function, which behaves much like signal with one significant twist: instead of taking a default value, it accepts a computation function (mirroring how computed works). If the computation's result changes, the linkedSignal's value follows suit automatically. Kristiyan Velkov's write-up covers both the scenarios where this is useful and the proper way to apply it.

💎 Angular's Standout Picks for 2024

📰 My new Angular Coding Style

After undertaking a substantial refactor of a large-scale project with Signals and the latest Angular APIs, Kevin Kreuzer shares the coding conventions and patterns that surfaced during the process. His write-up highlights the normalization of standalone components, the shift toward Signal-driven reactivity, and a departure from conventional lifecycle methods.

📰 Magic with Interceptors

Armen Vardanyan dives into the world of Angular Interceptors, examining how to modify URLs, leverage request contexts, inject application state, and manage error scenarios.

📰Bringing the power of Signals to Angular Forms with Signal Forms

Tim Deschryver has been experimenting with a Signal-based approach to forms. His implementation, which builds upon ngModel, offers an API reminiscent of reactive forms but swaps RxJS for signals. Though still in its early stages, the project is detailed in this post, where Tim outlines his reasoning, provides illustrative examples, and invites community input.

📰 Angular's effect(): Use Cases & Enforced Asynchrony

In this piece, Rainer Hahnekamp contrasts computed signals with effects. He outlines appropriate scenarios for employing effects and discusses strategies for dealing with the enforced asynchrony that can lead to timing-related issues.

📰This is your sign(al) to try TanStack Query & Angular

Robin Goetz starts by tracing the history of the TanStack Query library and defining the concept of server state. He then identifies the primary obstacles encountered when managing server state and demonstrates how TanStack Query mitigates these challenges. The article concludes with practical examples covering queries, mutations, and client-side invalidation, alongside tips for integrating the library into a modern Angular setup.

📰Building a Real-Time Chat Application with Angular and Firebase

Moe Mollaie discusses the scenarios that call for real-time connections and evaluates a range of potential solutions. He then guides readers through the process of creating a real-time chat application using Angular paired with Firebase.

📰Improving Code Reusability in Angular Projects

Evgeniy Tuboltsev (OZ) offers a set of recommendations for crafting Angular applications that are more maintainable, scalable, and reusable. The article touches on several key areas:

  • Pure functions
  • Component state management
  • Composition vs. inheritance
  • ::ng-deep
  • Nested subscriptions

📰Implicit Libraries with Nx: Lightweight Angular Architectures by Convention

Manfred Steyer presents an architectural approach where an Nx plugin infers library configurations based on conventions. With this model of implicit libraries, spinning up a new library is as simple as creating a directory containing an index.ts file.

The concept of implicit libraries originates from Younes Jaaidi's blog post. He has also published a detailed walkthrough on the subject.

📰Using isolatedModules in Angular 18.2

With Angular 18.2, support for TypeScript's isolatedModules has been added, potentially leading to faster production builds. Mark Thompson and Charles Lyding break down how the feature operates and the steps for enabling it within an Angular project.

📰Angular: RxJS vs Signals, what to use?

Using two distinct cases, Igor Pak illustrates the contexts where Signals prove more effective versus those where RxJS holds the advantage. His analysis concludes that while Signals excel in state management and straightforward updates, they can fall short in intricate scenarios where intermediate values are required.

📰 Top 10 Angular Architecture Mistakes You Really Want To Avoid

In a recent post, Tomas Trajan catalogs frequent pitfalls that developers encounter in Angular projects, such as:

  • Overlooking the distinction between eager and lazy-loaded parts of the application
  • Employing multiple methodologies to accomplish the same task
  • Prioritizing DRY principles at the expense of ISOLATION
  • Reviewing architecture by hand instead of relying on tooling
  • Lacking an understanding of Angular's two primary systems and their behavioral rules

👨‍💻About the author

I'm Gergely Szerovay. After years as a data scientist and full-stack developer, I've spent the last several years as a frontend tech lead, with a particular emphasis on Angular development. Tracking the rapid evolution of Angular and the broader frontend ecosystem is a core part of my work. To spread what I learn, I founded the Angular Addicts newsletter and publication in 2022, delivering a curated selection of top-tier resources every month. Whether you're just starting out or have years of experience, there's something for you. If you'd like to contribute as a writer, just let me know. Let's dive into Angular together! Subscribe here 🔥

The velocity of change in Angular has been remarkable, and with generative AI now influencing our workflows, the pace has only accelerated. To stay on top of AI-assisted software development, I've begun building AI tools out in the open, sharing my progress on AIBoosted.dev. Come along for the ride: Subscribe here 🚀

Find me on Substack (Angular Addicts), Substack (AIBoosted.dev), Medium, Dev.to, Twitter or LinkedIn for more on Angular and building AI applications with AI, Typescript, React, and Angular!