docs: add signals code example recipe book #62164

devchas · 2025-06-20T15:29:32Z

PR Checklist

Please check if your PR fulfills the following requirements:

The commit message follows our guidelines: https://github.com/angular/angular/blob/main/contributing-docs/commit-message-guidelines.md
Tests for the changes have been added (for bug fixes / features)
Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

Bugfix
Feature
Code style update (formatting, local variables)
Refactoring (no functional changes, no api changes)
Build related changes
CI related changes
Documentation content changes
angular.dev application / infrastructure changes
Other... Please describe:

What is the current behavior?

Issue Number: N/A

What is the new behavior?

Does this PR introduce a breaking change?

Yes
No

Other information

msmallest · 2025-06-20T16:07:31Z

adev/src/content/guide/signals/code-examples.md

+
+### Simplified HTTP Fetching: `httpResource()`
+
+The httpResource API (experimental) is a specialized version of resource that simplifies `HttpClient` requests. It accepts a reactive function that returns either a URL string for simple GET requests, or a full configuration object for more control.


Suggested change

The httpResource API (experimental) is a specialized version of resource that simplifies `HttpClient` requests. It accepts a reactive function that returns either a URL string for simple GET requests, or a full configuration object for more control.

The `httpResource` API (experimental) is a specialized version of resource that simplifies `HttpClient` requests. It accepts a reactive function that returns either a URL string for simple GET requests, or a full configuration object for more control.

msmallest · 2025-06-20T16:13:57Z

adev/src/content/examples/signals/src/equality/app/app.html

+  <div class="result-box">
+    <div class="display-section">
+      <h3>Current User:</h3>
+      <pre>{{ '{' }}


suggestion: use JsonPipe instead

github-actions · 2025-06-20T16:17:19Z

Deployed adev-preview for 611eeb6 to: https://ng-dev-previews-fw--pr-angular-angular-62164-adev-prev-a8hbslfy.web.app

Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt.

msmallest · 2025-06-20T16:30:48Z

adev/src/content/guide/signals/code-examples.md

+
+## Async Patterns
+
+### Declarative Data Fetching: `resource()`


Request: could you please add an rxResource example for the RxJS fans :0

MarkTechson

Can this be updated to use semantic HTML elements? Currently, div elements are used where there are better, more screen-reader friendly elements available such as section

jelbourn · 2025-06-20T18:36:59Z

adev/src/content/guide/signals/code-examples.md

+  <docs-code header="app/app.css" path="adev/src/content/examples/signals/src/immutability/app/app.css"/>
+</docs-code-multifile>
+
+## Conclusion: The Future is Reactive and Signal-Driven


IMO it's kind of odd to have a "conclusion" for a collection of code examples

jelbourn · 2025-06-20T18:38:40Z

adev/src/content/guide/signals/code-examples.md

@@ -0,0 +1,225 @@
+# The New Age of Reactivity in Angular


IMO this title isn't really aligned with the navigation that leads here

Also, we generally want to avoid framing things as "new" in docs, since time passes and then it's stale
https://github.com/angular/angular/blob/main/contributing-docs/documentation-authoring.md

Docs should describe the framework as it exists now, never relative to a specific point in time. Docs should avoid referring to anything as "new" or "recent". Docs should avoid mentioning "upcoming" or "future" changes.

jelbourn · 2025-06-20T18:40:39Z

adev/src/content/guide/signals/code-examples.md

@@ -0,0 +1,225 @@
+# The New Age of Reactivity in Angular
+
+This interactive guide explores Angular Signals, a fundamental evolution in how the framework manages state and reactivity. The primary motivation behind signals is to enable fine-grained change detection, allowing Angular to know *exactly* which parts of the page have been affected by a state change and update only those specific DOM nodes. This precision is key to unlocking significant runtime performance improvements and is a critical step toward making Zone.js optional.


The primary motivation behind signals is to enable fine-grained change detection, allowing Angular to know exactly which parts of the page have been affected by a state change and update only those specific DOM nodes.

This isn't exactly wrong, but it's also misleading because Angular doesn't do fine-grained change detection (yet) today. Signals do not inherently make your app faster (zoneless does, though).

jelbourn · 2025-06-20T18:43:52Z

adev/src/content/guide/signals/code-examples.md

+
+This interactive guide explores Angular Signals, a fundamental evolution in how the framework manages state and reactivity. The primary motivation behind signals is to enable fine-grained change detection, allowing Angular to know *exactly* which parts of the page have been affected by a state change and update only those specific DOM nodes. This precision is key to unlocking significant runtime performance improvements and is a critical step toward making Zone.js optional.
+
+Beyond performance, signals dramatically improve the developer experience. They offer a more explicit and predictable data flow with a simple, easy-to-understand API. This guide is your "recipe book" for learning and applying these powerful new primitives. Use the navigation on the left to explore different concepts and try the interactive examples to see signals in action.


This is perhaps a matter of opinion, but this section seems a little too hype-y

Fair comment. I'll give this another crack.

jelbourn · 2025-06-20T18:46:29Z

adev/src/content/guide/signals/code-examples.md

+
+### The Source of Truth: `signal()`
+
+A writable signal, created with the `signal()` function, is the foundation of all reactive state. It's a container for a value that notifies consumers when it changes. You create it with an initial value and read it by calling it as a function, like `mySignal()`. State is changed using the `.set()` or `.update()` methods.


I worry a little that the framing text around the examples is doing too much work that duplicates the explanatory/introductory content we would have in the other topics/tutorials. IMO we should have one canonical journey where we explain the concepts in a particular guide, and reinforce that with examples

bencodezen

Hey @devchas! I like the way the code examples help to illustrate different concepts of signals.

As far as the explainers go though, I think it currently is at odds with the rest of the guide. Would it be possible to refactor this PR as enhancements to the guide as inline examples rather than a separate page?

docs: add signals code example recipe book

611eeb6

pullapprove bot requested a review from kirjs June 20, 2025 15:29

angular-robot bot added the area: docs Related to the documentation label Jun 20, 2025

ngbot bot added this to the Backlog milestone Jun 20, 2025

MarkTechson self-requested a review June 20, 2025 16:00

MarkTechson added action: review The PR is still awaiting reviews from at least one requested reviewer adev: preview labels Jun 20, 2025

msmallest reviewed Jun 20, 2025

View reviewed changes

MarkTechson requested changes Jun 20, 2025

View reviewed changes

jelbourn reviewed Jun 20, 2025

View reviewed changes

bencodezen requested a review from MarkTechson June 20, 2025 20:42

bencodezen requested changes Jun 20, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

docs: add signals code example recipe book #62164

docs: add signals code example recipe book #62164

devchas commented Jun 20, 2025

Uh oh!

msmallest Jun 20, 2025

Uh oh!

msmallest Jun 20, 2025

Uh oh!

github-actions bot commented Jun 20, 2025

Uh oh!

msmallest Jun 20, 2025 •

edited

Loading

Uh oh!

MarkTechson left a comment

Uh oh!

jelbourn Jun 20, 2025

Uh oh!

jelbourn Jun 20, 2025

Uh oh!

jelbourn Jun 20, 2025

Uh oh!

jelbourn Jun 20, 2025

Uh oh!

devchas Jun 20, 2025

Uh oh!

jelbourn Jun 20, 2025

Uh oh!

bencodezen left a comment

Uh oh!

Uh oh!


		### Simplified HTTP Fetching: `httpResource()`

		The httpResource API (experimental) is a specialized version of resource that simplifies `HttpClient` requests. It accepts a reactive function that returns either a URL string for simple GET requests, or a full configuration object for more control.

	The httpResource API (experimental) is a specialized version of resource that simplifies `HttpClient` requests. It accepts a reactive function that returns either a URL string for simple GET requests, or a full configuration object for more control.
	The `httpResource` API (experimental) is a specialized version of resource that simplifies `HttpClient` requests. It accepts a reactive function that returns either a URL string for simple GET requests, or a full configuration object for more control.


		## Async Patterns

		### Declarative Data Fetching: `resource()`

		@@ -0,0 +1,225 @@
		# The New Age of Reactivity in Angular

		This interactive guide explores Angular Signals, a fundamental evolution in how the framework manages state and reactivity. The primary motivation behind signals is to enable fine-grained change detection, allowing Angular to know exactly which parts of the page have been affected by a state change and update only those specific DOM nodes. This precision is key to unlocking significant runtime performance improvements and is a critical step toward making Zone.js optional.


		This interactive guide explores Angular Signals, a fundamental evolution in how the framework manages state and reactivity. The primary motivation behind signals is to enable fine-grained change detection, allowing Angular to know exactly which parts of the page have been affected by a state change and update only those specific DOM nodes. This precision is key to unlocking significant runtime performance improvements and is a critical step toward making Zone.js optional.

		Beyond performance, signals dramatically improve the developer experience. They offer a more explicit and predictable data flow with a simple, easy-to-understand API. This guide is your "recipe book" for learning and applying these powerful new primitives. Use the navigation on the left to explore different concepts and try the interactive examples to see signals in action.


		### The Source of Truth: `signal()`

		A writable signal, created with the `signal()` function, is the foundation of all reactive state. It's a container for a value that notifies consumers when it changes. You create it with an initial value and read it by calling it as a function, like `mySignal()`. State is changed using the `.set()` or `.update()` methods.

docs: add signals code example recipe book #62164

Are you sure you want to change the base?

docs: add signals code example recipe book #62164

Conversation

devchas commented Jun 20, 2025

PR Checklist

PR Type

What is the current behavior?

What is the new behavior?

Does this PR introduce a breaking change?

Other information

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Jun 20, 2025

Uh oh!

msmallest Jun 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

MarkTechson left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bencodezen left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

msmallest Jun 20, 2025 •

edited

Loading