Angular 21.2: Resource Composition via Snapshots

A deep dive into Angular's new snapshot-based pattern for transforming and composing resources without losing their interface.

Before you start diving into this new topic you can review the full guide of resource() that was introduced in Angular 19.

TL;DR

Angular added three things that let you take a resource, modify its behavior, and get back a real resource.

Resource  →  .snapshot  →  transform it  →  resourceFromSnapshots()  →  Resource

The killer use case? Keep showing old data while new data loads — no more blank screens when switching between items. And it’s a generic utility you write once and reuse everywhere.

PR: feat(core): resource composition via snapshots
Authors: Alex Rickabaugh & Jessica Janiuk
Status: Experimental · Angular 21.2+

Code Repository Example in this article can be found here.

The Problem (in Plain English)

Imagine you have a weather app. The user is looking at London’s weather. They click “Tokyo.” What happens?

Before this PR:

1. The resource enters “loading” state

2. value() immediately becomes undefined

3. The weather card disappears — blank screen, skeleton loader

4. Tokyo’s data arrives, card re-appears

That flash of empty content feels broken. Users hate it.

You might think: “I’ll just keep the old value around in a separate signal.” Sure, but then you lose the Resource interface. Your workaround doesn’t have .isLoading(), .hasValue(), .status(). It’s a one-off hack that doesn’t compose.

The real problem: there was no way to take a Resource, tweak its behavior, and get back something that’s still a Resource.