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

Learn about what happened in the world of Angular last year

I collected the best Angular articles of 2024, 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.

📢New Angular versions released in 2024

• Master Angular 17 Study guide

• Master Angular 17.1 and 17.2 Study guide

• What's new in Angular 17.3

• What's new in Angular 18, Official release announcement by Minko Gechev

• What's new in Angular 18.1? by Cédric Exbrayat

• What's new in Angular 18.2? by Cédric Exbrayat

• Angular v19 is now available! by Minko Gechev

💎New Angular features

📰Manfred Steyer's Signals article series

Manfred Steyer wrote a 6-piece article series about Angular Signals:

• Signals in Angular: The Future of Change Detection

• Component Communication with Signals: Inputs, Two-Way Bindings, and Content/ View Queries

• Successful with Signals in Angular – 3 Effective Rules for Your Architecture

• Skillfully Using Signals in Angular – Selected Hints for Professional Use

• When (Not) to use Effects in Angular — and what to do instead

• Asynchronous Data Flow with Angular’s new Resource API

📰Replace your @Input setters with input() signals

In his blog post, Matthieu Riegler discusses the pitfalls of using @Input setters in Angular applications, and then highlights how using input() signals, along with effect(), can provide a more reliable, glitch-free approach.

📰 Everything you need to know about the resource API

Enea Jahollari 's tutorial shows, how to:

• Use the resource API to update data locally

• Load and refresh data

• Create reusable resources

• Use Observables and the rxResource function for data loading

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

The Angular team recently merged a PR with the new @let syntax, allowing Angular developers to declare local variables in templates. In his blogpost, Netanel Basal explains when and how to use this new feature.

📰Angular Forms new unified control state change events

Angular 18 introduced a new feature in its Reactive Forms library called unified control state change events. The AbstractControl class (the base class for FormControl, FormGroup, and FormArray) now has a new events: Observable<ControlEvent<TValue>> property. This property is an observable, that emits for value, status, pristine or touched changes. Davide Passafaro' s article starts with the basics of Reactive Forms, binding them with the template, understanding validation and the disabled state. Then, he explains how to use the new events observable to track the form's state.

📰 Angular 19: linkedSignal

Angular 19's new linkedSignal function is similar to signal, but with one key distinction: instead of providing a default value, you supply a computation function, much like computed. Whenever the result of this computation changes, the value of the linkedSignal updates accordingly. Kristiyan Velkov explains when and how to use this new function.

---

💎Angular Gems of 2024

📰 My new Angular Coding Style

Kevin Kreuzer has rewritten a large codebase using Signals and the new Angular APIs recently. In this article, he explains the new coding styles and patterns that emerged during the refactoring. Key points include the adoption of standalone components as a standard, the transition to using Signals for reactivity, and moving away from traditional lifecycle hooks.

📰 Magic with Interceptors

Armen Vardanyan covers Angular Interceptors, including URL modifications, request contexts, app state injection, and error handling.

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

Tim Deschryver began creating signal based forms. These are built on top of ngModel and have an API similar to reactive forms but use signals instead of RxJS. The implementation is still a work in progress. In this blog post, Tim explains his ideas behind signal forms, provides examples, and asks for feedback from the community.

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

Rainer Hahnekamp 's article explores the differences between computed Signals and effects. He explains when to use effects and how to handle enforced asynchrony to prevent timing bugs.

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

Robin Goetz explains to us the origins of the TanStack Query data-fetching library and what is a server state. Then he summarizes, what the biggest challenges are, when we manage the server state, and how TanStack Query addresses these issues. He also shows us examples for data queries and mutations, client-side invalidation, and explains how he uses TanStack Query with modern Angular.

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

Moe Mollaie explains, when real-time connections are needed and compares different solutions. He then walks through building a real-time chat application using Angular and a Firebase.

📰Improving Code Reusability in Angular Projects

In his article, Evgeniy Tuboltsev (OZ) shares some recommendations on how to make our Angular applications reusable, maintainable, and scalable. He covers the following topics:

• Pure functions

• Component state management

• Composition vs. inheritance

• ::ng-deep

• Nested subscriptions

📰Implicit Libraries with Nx: Lightweight Angular Architectures by Convention

Manfred Steyer shows us an architecture where library configurations are derived by an Nx plugin using conventions. With implicit libraries, we can create a new library by creating a folder with an index.ts file.

The idea of implicit libraries comes from Younes Jaaidi's blog post. He also wrote a step by step guide on this topic.

📰Using isolatedModules in Angular 18.2

Angular 18.2 supports TypeScript isolatedModules. This feature may boost production build times. Mark Thompson and Charles Lyding explain how this feature works and how to set it up in an Angular project.

📰Angular: RxJS vs Signals, what to use?

Igor Pak provi-des two use cases to illustrate when to use Signals and when to use RxJS. His article shows that while Signals are good for state management and simple data updates, they might miss intermediate values in complex scenarios.

📰 Top 10 Angular Architecture Mistakes You Really Want To Avoid

In his latest blog post, Tomas Trajan collected common mistakes developers make in Angular, like:

• Not thinking about the difference between eager and lazy parts of the app

• Using more than one way to achieve the same

• Focusing on DRY instead of ISOLATION

• Analyzing architecture manually instead of with the help of tooling

• Not being familiar with the two main systems in Angular and the rules by which they behave

👨‍💻About the author

My name is Gergely Szerovay, I worked as a data scientist and full-stack developer for many years, and I have been working as frontend tech lead, focusing on Angular based frontend development. As part of my role, I'm constantly following how Angular and the frontend development scene in general is evolving. To share my knowledge, I started the Angular Addicts monthly newsletter and publication in 2022, 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. Let me know if you would like to be included as a writer. Let’s learn Angular together! Subscribe here 🔥

Angular has evolved very rapidly over the past few years, and in the past year, with the rise of generative AI, our software development workflows have also evolved rapidly. In order to closely follow the evolution of AI-assisted software development, I decided to start building AI tools in public, and publish my progress on AIBoosted.dev. Join my on this learning journey: Subscribe here 🚀

Follow me on Substack (Angular Addicts), Substack (AIBoosted.dev), Medium, Dev.to, Twitter or LinkedIn to learn more about Angular, and how to build AI apps with AI, Typescript, React and Angular!

---