docs(www): use code blocks for code snippets

Author: exequiel09

projects/www/src/app/pages/guide/signals/faq.md

@@ -51,6 +51,8 @@ export class CounterStore extends signalStore(
 
 To get the type of a SignalStore, use the `InstanceType` utility type.
 
+<ngrx-code-example>
+
 ```ts
 const CounterStore = signalStore(withState({ count: 0 }));
 
@@ -61,13 +63,17 @@ function logCount(store: CounterStore): void {
 }
 ```
 
+</ngrx-code-example>
+
 </details>
 
 <details>
   <summary><b>#5</b> Can I inject a SignalStore via the constructor?</summary>
 
 Yes. To inject a SignalStore via the constructor, define and export its type with the same name.
 
+<ngrx-code-example>
+
 ```ts
 // counter-store.ts
 export const CounterStore = signalStore(withState({ count: 0 }));
@@ -85,6 +91,8 @@ export class Counter {
 }
 ```
 
+</ngrx-code-example>
+
 </details>
 
 <details>

projects/www/src/app/pages/guide/signals/rxjs-integration.md

@@ -37,6 +37,8 @@ export class Numbers {
 Each invocation of the reactive method pushes the input value through the reactive chain.
 When called with a static value, the reactive chain executes once.
 
+<ngrx-code-example>
+
 ```ts
 import { Component } from '@angular/core';
 import { map, pipe, tap } from 'rxjs';
@@ -63,8 +65,12 @@ export class Numbers {
 }
 ```
 
+</ngrx-code-example>
+
 When a reactive method is called with a signal the reactive chain is executed every time the signal value changes.
 
+<ngrx-code-example>
+
 ```ts
 import { Component, signal } from '@angular/core';
 import { map, pipe, tap } from 'rxjs';
@@ -92,8 +98,12 @@ export class Numbers {
 }
 ```
 
+</ngrx-code-example>
+
 In addition to providing a signal, it is also possible to provide a computation function and combine multiple signals within it.
 
+<ngrx-code-example>
+
 ```ts
 import { Component, signal } from '@angular/core';
 import { map, pipe, tap } from 'rxjs';
@@ -123,8 +133,12 @@ export class Numbers {
 }
 ```
 
+</ngrx-code-example>
+
 When a reactive method is called with an observable, the reactive chain is executed every time the observable emits a new value.
 
+<ngrx-code-example>
+
 ```ts
 import { Component } from '@angular/core';
 import { interval, map, of, pipe, tap } from 'rxjs';
@@ -153,6 +167,8 @@ export class Numbers {
 }
 ```
 
+</ngrx-code-example>
+
 By default, the `rxMethod` needs to be executed within an injection context.
 It's tied to its lifecycle and is automatically cleaned up when the injector is destroyed.
 
@@ -161,6 +177,8 @@ It's tied to its lifecycle and is automatically cleaned up when the injector is
 The `rxMethod` is a great choice for handling API calls in a reactive manner.
 The subsequent example demonstrates how to use `rxMethod` to fetch the book by id whenever the `selectedBookId` signal value changes.
 
+<ngrx-code-example>
+
 ```ts
 import { Component, inject, signal } from '@angular/core';
 import { concatMap, filter, pipe } from 'rxjs';
@@ -206,6 +224,8 @@ export class BookList {
 }
 ```
 
+</ngrx-code-example>
+
 <ngrx-docs-alert type="inform">
 
 For safe handling of API responses, it is recommended to use the `tapResponse` operator from the `@ngrx/operators` package.
@@ -220,6 +240,8 @@ Further details can be found in the [Reactive Store Methods](guide/signals/signa
 
 To create a reactive method without arguments, the `void` type should be specified as a generic argument to the `rxMethod` function.
 
+<ngrx-code-example>
+
 ```ts
 import { Component, inject, signal } from '@angular/core';
 import { exhaustMap } from 'rxjs';
@@ -253,13 +275,17 @@ export class BookList {
 }
 ```
 
+</ngrx-code-example>
+
 ### Reactive Methods and Injector Hierarchies
 
 The cleanup behavior of reactive methods differs when they're created and called across different injector hierarchies.
 
 If the reactive method is called within the descendant injection context, the call will be automatically cleaned up when the descendant injector is destroyed.
 However, when the call is made outside of the descendant injection context, it's necessary to explicitly provide the descendant injector reference to ensure proper cleanup. Otherwise, the cleanup occurs when the ascendant injector where the reactive method is initialized gets destroyed.
 
+<ngrx-code-example>
+
 ```ts
 import {
   Component,
@@ -297,6 +323,8 @@ export class Numbers implements OnInit {
 }
 ```
 
+</ngrx-code-example>
+
 <ngrx-docs-alert type="inform">
 
 If the injector is not provided when calling the reactive method with a signal, a computation function, or an observable outside the injection context, a warning message about a potential memory leak is displayed in development mode.
@@ -307,6 +335,8 @@ If the injector is not provided when calling the reactive method with a signal,
 
 If a reactive method needs to be cleaned up before the injector is destroyed, manual cleanup can be performed by calling the `destroy` method.
 
+<ngrx-code-example>
+
 ```ts
 import { Component } from '@angular/core';
 import { interval, tap } from 'rxjs';
@@ -333,9 +363,13 @@ export class Numbers {
 }
 ```
 
+</ngrx-code-example>
+
 When invoked, the reactive method returns the object with the `destroy` method.
 This allows manual cleanup of a specific call, preserving the activity of other reactive method calls until the corresponding injector is destroyed.
 
+<ngrx-code-example>
+
 ```ts
 import { Component } from '@angular/core';
 import { interval, tap } from 'rxjs';
@@ -362,6 +396,8 @@ export class Numbers {
 }
 ```
 
+</ngrx-code-example>
+
 ### Initialization Outside of Injection Context
 
 Initialization of the reactive method outside an injection context is possible by providing an injector as the second argument to the `rxMethod` function.

projects/www/src/app/pages/guide/signals/signal-method.md

@@ -25,6 +25,8 @@ export class Numbers {
 
 `logDoubledNumber` can be called with a static value of type `number` or a `Signal<number>`.
 
+<ngrx-code-example>
+
 ```ts
 @Component({
   /* ... */
@@ -49,8 +51,12 @@ export class Numbers {
 }
 ```
 
+</ngrx-code-example>
+
 In addition to providing a Signal, it is also possible to provide a computation function and combine multiple Signals within it.
 
+<ngrx-code-example>
+
 ```ts
 @Component({
   /* ... */
@@ -72,13 +78,17 @@ export class Numbers {
 }
 ```
 
+</ngrx-code-example>
+
 ## Automatic Cleanup
 
 `signalMethod` uses an `effect` internally to track the Signal changes.
 By default, the `effect` runs in the injection context of the caller. In the example above, that is the `Numbers` component. That means, that the `effect` is automatically cleaned up when the component is destroyed.
 
 If the call happens outside an injection context, then the injector of the `signalMethod` is used. This would be the case, if `logDoubledNumber` runs in `ngOnInit`:
 
+<ngrx-code-example>
+
 ```ts
 @Component({
   /* ... */
@@ -97,10 +107,14 @@ export class Numbers implements OnInit {
 }
 ```
 
+</ngrx-code-example>
+
 Even though `logDoubledNumber` is called outside an injection context, automatic cleanup occurs when the `Numbers` component is destroyed, since `logDoubledNumber` was created within the component's injection context.
 
 However, when creating a `signalMethod` in an ancestor injection context, the cleanup behavior is different:
 
+<ngrx-code-example>
+
 ```ts
 @Injectable({ providedIn: 'root' })
 export class NumbersService {
@@ -124,6 +138,8 @@ export class Numbers implements OnInit {
 }
 ```
 
+</ngrx-code-example>
+
 Here, the `effect` used internally by `signalMethod` outlives the component, which would produce a memory leak.
 
 <ngrx-docs-alert type="inform">
@@ -136,6 +152,8 @@ If an injector is not provided when a method generated by `signalMethod` is call
 
 When a `signalMethod` is created in an ancestor injection context, it's necessary to explicitly provide the caller injector to ensure proper cleanup:
 
+<ngrx-code-example>
+
 ```ts
 @Component({
   /* ... */
@@ -158,10 +176,14 @@ export class Numbers implements OnInit {
 }
 ```
 
+</ngrx-code-example>
+
 ## Initialization Outside of Injection Context
 
 The `signalMethod` must be initialized within an injection context. To initialize it outside an injection context, it's necessary to provide an injector as the second argument:
 
+<ngrx-code-example>
+
 ```ts
 @Component({
   /* ... */
@@ -178,6 +200,8 @@ export class Numbers implements OnInit {
 }
 ```
 
+</ngrx-code-example>
+
 ## Advantages over Effect
 
 At first sight, `signalMethod`, might be the same as `effect`:

projects/www/src/app/pages/guide/signals/signal-state.md

@@ -27,6 +27,8 @@ The state's type must be a record/object literal. Add arrays or primitive values
 
 `signalState` returns an extended version of a signal that possesses all the capabilities of a read-only signal.
 
+<ngrx-code-example>
+
 ```ts
 import { computed, effect } from '@angular/core';
 
@@ -37,8 +39,12 @@ const userStateStr = computed(() => JSON.stringify(userState()));
 effect(() => console.log('userState', userState()));
 ```
 
+</ngrx-code-example>
+
 Additionally, the `signalState` function generates signals for each state property.
 
+<ngrx-code-example>
+
 ```ts
 const user = userState.user; // type: DeepSignal<User>
 const isAdmin = userState.isAdmin; // type: Signal<boolean>
@@ -47,9 +53,13 @@ console.log(user()); // logs: { firstName: 'Eric', lastName: 'Clapton' }
 console.log(isAdmin()); // logs: false
 ```
 
+</ngrx-code-example>
+
 When a state property holds an object as its value, the `signalState` function generates a `DeepSignal`.
 It can be used as a regular read-only signal, but it also contains signals for each property of the object it refers to.
 
+<ngrx-code-example>
+
 ```ts
 const firstName = user.firstName; // type: Signal<string>
 const lastName = user.lastName; // type: Signal<string>
@@ -58,6 +68,8 @@ console.log(firstName()); // logs: 'Eric'
 console.log(lastName()); // logs: 'Clapton'
 ```
 
+</ngrx-code-example>
+
 <ngrx-docs-alert type="help">
 
 For enhanced performance, deeply nested signals are generated lazily and initialized only upon first access.
@@ -69,6 +81,8 @@ For enhanced performance, deeply nested signals are generated lazily and initial
 The `patchState` function provides a type-safe way to perform updates on pieces of state.
 It takes a SignalState or SignalStore instance as the first argument, followed by a sequence of partial states or partial state updaters as additional arguments.
 
+<ngrx-code-example>
+
 ```ts
 import { patchState } from '@ngrx/signals';
 
@@ -86,6 +100,8 @@ patchState(userState, { isAdmin: false }, (state) => ({
 }));
 ```
 
+</ngrx-code-example>
+
 <ngrx-docs-alert type="error">
 
 Updaters passed to the `patchState` function must perform state updates in an immutable manner.
@@ -96,6 +112,8 @@ Updaters passed to the `patchState` function must perform state updates in an im
 
 Instead of providing partial states or updaters directly to the `patchState` function, it's possible to create custom state updaters.
 
+<ngrx-code-example>
+
 ```ts
 import { PartialStateUpdater } from '@ngrx/signals';
 
@@ -108,8 +126,12 @@ function setFirstName(
 const setAdmin = () => ({ isAdmin: true });
 ```
 
+</ngrx-code-example>
+
 Custom state updaters are easy to test and can be reused across different parts of the application.
 
+<ngrx-code-example>
+
 ```ts
 // Before:
 patchState(userState, (state) => ({
@@ -121,6 +143,8 @@ patchState(userState, (state) => ({
 patchState(userState, setFirstName('Stevie'), setAdmin());
 ```
 
+</ngrx-code-example>
+
 ## Usage
 
 ### Example 1: SignalState in a Component