feat: add withResource

This adds the implementation for `withResource` for both named
and single resources.

The implementation is close to the PR in NgRx but doesn't use any
internal types.

Because of a bug in `withLinkedState` ngrx/platform#4931,
we currently have no override protected for `value`.

For more information, check out the docs.

Co-authored-by: Michael Small <[email protected]>

Author: rainerhahnekamp

docs/docs/extensions.md

@@ -11,6 +11,7 @@ It offers extensions like:
 - [DataService](./with-data-service): Builds on top of `withEntities` and adds the backend synchronization to it
 - [Immutable State Protection](./with-immutable-state): Protects the state from being mutated outside or inside the Store.
 - [~Redux~](./with-redux): Possibility to use the Redux Pattern. Deprecated in favor of NgRx's `@ngrx/signals/events` starting in 19.2
+- [Resource](./with-resource): Integrates Angular's Resource into SignalStore for async data operations
 - [Reset](./with-reset): Adds a `resetState` method to your store
 - [Call State](./with-call-state): Add call state management to your signal stores
 - [Storage Sync](./with-storage-sync): Synchronizes the Store with Web Storage

docs/docs/with-resource.md

@@ -0,0 +1,121 @@
+---
+title: withResource()
+---
+
+```typescript
+import { withResource } from '@angular-architects/ngrx-toolkit';
+```
+
+> **⚠️ Important Note**: This extension is very likely to land in NgRx once Angular's `Resource` enters developer preview. The `withResource` extension provides early access to this functionality and will be maintained for compatibility until the official NgRx implementation is available.
+
+`withResource()` is a feature in NgRx SignalStore that connects Angular's Resource API with the store.
+The idea: you can use a store to directly manage async data (like loading from an API), and `withResource()` helps you wire that in.
+
+There are two flavors on how you can use it.
+
+**1. Single Resource flavor**
+
+- The Store implements the type `Resource<T>`.
+- That means the store itself exposes the standard resource properties and methods:
+  - `value()`, `status()`, `error()`, `hasValue`, etc.
+
+**2. Named Resources flavor**
+
+- Instead of making the whole store act as a single resource, you can define multiple named resources within the same store.
+- Each resource gets its own name, which is used as a prefix for all its properties and methods.
+- For example, if you define a resource named `users`, the store will provide:
+  - `usersValue()`, `usersStatus()`, `usersError()`, `usersHasValue()`
+
+For named resources, there’s an extra option: you can map them back into the Resource type.
+This is useful if you want to treat just that part as a “normal” Angular Resource again — for example, to pass it into a component that expects a `Resource<T>`.
+
+## Basic Usage
+
+The extension supports both single resource integration and multiple named resources, giving you flexibility in how you structure your async data management.
+
+### Single Resource
+
+```typescript
+import { withResource } from '@angular-architects/ngrx-toolkit';
+import { signalStore, withState } from '@ngrx/signals';
+import { httpResource } from '@angular/core';
+
+export const UserStore = signalStore(
+  withState({ userId: 1 }),
+  withResource((state) => httpResource(() => `/user/${state.userId}`)),
+);
+```
+
+The store now provides:
+
+- `value()`: The resource's current value
+- `status()`: The resource's current status
+- `error()`: Any error that occurred
+- `isLoading()`: Whether the resource is currently loading
+- `hasValue()`: Type guard to check if the resource has a value
+- `_reload()`: Method to reload the resource
+
+### Multiple Named Resources
+
+```typescript
+export const UserStore = signalStore(
+  withState({ userId: undefined as number | undefined }),
+  withResource(({ userId }) => ({
+    list: httpResource<User[]>(() => '/users', { defaultValue: [] }),
+    detail: httpResource<User>(() => (userId === undefined ? undefined : `/user/${userId}`)),
+  })),
+);
+```
+
+With named resources, each resource gets prefixed properties:
+
+- `listValue()`, `detailValue()`: Resource values
+- `listStatus()`, `detailStatus()`: Resource statuses
+- `listError()`, `detailError()`: Resource errors
+- `listIsLoading()`, `detailIsLoading()`: Loading states
+- `listHasValue()`, `detailHasValue()`: Type guards
+- `_listReload()`, `_detailReload()`: Reload methods
+
+## Choosing Between Single and Multiple Resources
+
+- **Single resource:** use when your store works with just one data source.
+- **Named resources:** use when your store is larger and manages multiple entities or async operations.
+
+## Component Usage
+
+```typescript
+@Component({
+  selector: 'app-user-detail',
+  template: `
+    @if (userStore.isLoading()) {
+      <div>Loading...</div>
+    } @else if (userStore.error()) {
+      <p>An error has happened.</p>
+    } @else if (userStore.hasValue()) {
+      <h2>{{ userStore.value().name }}</h2>
+      <p>{{ userStore.value().email }}</p>
+    }
+  `,
+})
+export class UserDetail {
+  protected readonly userStore = inject(UserStore);
+}
+```
+
+## Resource Mapping
+
+For named resources, you can use the `mapToResource` utility to get a properly typed `Resource<T>`:
+
+```typescript
+import { mapToResource } from '@angular-architects/ngrx-toolkit';
+
+const store = signalStore(
+  withState({ userId: undefined as number | undefined }),
+  withResource(({ userId }) => ({
+    user: httpResource<User>(() => (userId === undefined ? undefined : `/users/${userId}`)),
+  })),
+);
+
+const userResource = mapToResource(store, 'user');
+// userResource now satisfies Resource<User>
+```

docs/sidebars.ts

@@ -16,16 +16,17 @@ const sidebars: SidebarsConfig = {
   // By default, Docusaurus generates a sidebar from the docs folder structure
   extensionSidebar: [
     'extensions',
-    'with-data-service',
     'with-devtools',
-    'with-redux',
+    'with-call-state',
+    'with-conditional',
+    'with-data-service',
+    'with-feature-factory',
+    'with-immutable-state',
+    'with-reset',
+    'with-resource',
     'with-storage-sync',
     'with-undo-redo',
-    'with-reset',
-    'with-immutable-state',
-    'with-feature-factory',
-    'with-conditional',
-    'with-call-state',
+    'with-redux',
   ],
   reduxConnectorSidebar: [
     {

libs/ngrx-toolkit/src/index.ts

@@ -41,3 +41,4 @@ export {
 } from './lib/storage-sync/with-storage-sync';
 export { emptyFeature, withConditional } from './lib/with-conditional';
 export { withFeatureFactory } from './lib/with-feature-factory';
+export { mapToResource, withResource } from './lib/with-resource';