docs(component-store): add alert about NgRx Signals (#4629)

ngrx · Dec 19, 2024 · 57d0c52 · 57d0c52
1 parent 6a717f3
commit 57d0c52
Show file tree

Hide file tree

Showing 11 changed files with 128 additions and 47 deletions.
diff --git a/projects/ngrx.io/content/guide/component-store/comparison.md b/projects/ngrx.io/content/guide/component-store/comparison.md
@@ -1,3 +1,12 @@
+<div class="alert is-helpful">
+
+**<a href="/guide/signals"><b>NgRx Signals</b></a> is the new default.**
+
+The NgRx team recommends using the `@ngrx/signals` library for local state management in Angular.
+While ComponentStore remains supported, we encourage using `@ngrx/signals` for new projects and considering migration for existing ones.
+
+</div>
+
 # Comparison of ComponentStore and Store
 
 Both ComponentStore and Store are designed to manage the state in an Angular application, however

diff --git a/projects/ngrx.io/content/guide/component-store/effect.md b/projects/ngrx.io/content/guide/component-store/effect.md
@@ -1,3 +1,12 @@
+<div class="alert is-helpful">
+
+**<a href="/guide/signals"><b>NgRx Signals</b></a> is the new default.**
+
+The NgRx team recommends using the `@ngrx/signals` library for local state management in Angular.
+While ComponentStore remains supported, we encourage using `@ngrx/signals` for new projects and considering migration for existing ones.
+
+</div>
+
 # Effects
 
 Effects are designed to extract any side-effects (such as Network calls) from components and

diff --git a/projects/ngrx.io/content/guide/component-store/index.md b/projects/ngrx.io/content/guide/component-store/index.md
@@ -1,3 +1,12 @@
+<div class="alert is-helpful">
+
+**<a href="/guide/signals"><b>NgRx Signals</b></a> is the new default.**
+
+The NgRx team recommends using the `@ngrx/signals` library for local state management in Angular.
+While ComponentStore remains supported, we encourage using `@ngrx/signals` for new projects and considering migration for existing ones.
+
+</div>
+
 # @ngrx/component-store
 
 ComponentStore is a stand-alone library that helps to manage local/component state. It's an alternative to reactive push-based "Service with a Subject" approach.

diff --git a/projects/ngrx.io/content/guide/component-store/initialization.md b/projects/ngrx.io/content/guide/component-store/initialization.md
@@ -1,3 +1,12 @@
+<div class="alert is-helpful">
+
+**<a href="/guide/signals"><b>NgRx Signals</b></a> is the new default.**
+
+The NgRx team recommends using the `@ngrx/signals` library for local state management in Angular.
+While ComponentStore remains supported, we encourage using `@ngrx/signals` for new projects and considering migration for existing ones.
+
+</div>
+
 # Initialization
 
 ComponentStore can be initialized in 2 ways:

diff --git a/projects/ngrx.io/content/guide/component-store/install.md b/projects/ngrx.io/content/guide/component-store/install.md
@@ -1,3 +1,12 @@
+<div class="alert is-helpful">
+
+**<a href="/guide/signals"><b>NgRx Signals</b></a> is the new default.**
+
+The NgRx team recommends using the `@ngrx/signals` library for local state management in Angular.
+While ComponentStore remains supported, we encourage using `@ngrx/signals` for new projects and considering migration for existing ones.
+
+</div>
+
 # Installation
 
 ## Installing with `ng add`

diff --git a/projects/ngrx.io/content/guide/component-store/lifecycle.md b/projects/ngrx.io/content/guide/component-store/lifecycle.md
@@ -1,3 +1,12 @@
+<div class="alert is-helpful">
+
+**<a href="/guide/signals"><b>NgRx Signals</b></a> is the new default.**
+
+The NgRx team recommends using the `@ngrx/signals` library for local state management in Angular.
+While ComponentStore remains supported, we encourage using `@ngrx/signals` for new projects and considering migration for existing ones.
+
+</div>
+
 # Lifecycle
 
 NgRx ComponentStore comes with lifecycle hooks and observables for performing tasks after the ComponentStore is initially instantiated, after the initial state is first set, and when the ComponentStore is destroyed. You can use these lifecycle hooks to set up long-running effects, wire up additional logic, and other tasks outside the constructor of the ComponentStore.

diff --git a/projects/ngrx.io/content/guide/component-store/read.md b/projects/ngrx.io/content/guide/component-store/read.md
@@ -1,3 +1,12 @@
+<div class="alert is-helpful">
+
+**<a href="/guide/signals"><b>NgRx Signals</b></a> is the new default.**
+
+The NgRx team recommends using the `@ngrx/signals` library for local state management in Angular.
+While ComponentStore remains supported, we encourage using `@ngrx/signals` for new projects and considering migration for existing ones.
+
+</div>
+
 # Reading state
 
 ## `select` method

diff --git a/projects/ngrx.io/content/guide/component-store/usage.md b/projects/ngrx.io/content/guide/component-store/usage.md
@@ -1,3 +1,12 @@
+<div class="alert is-helpful">
+
+**<a href="/guide/signals"><b>NgRx Signals</b></a> is the new default.**
+
+The NgRx team recommends using the `@ngrx/signals` library for local state management in Angular.
+While ComponentStore remains supported, we encourage using `@ngrx/signals` for new projects and considering migration for existing ones.
+
+</div>
+
 # Usage
 
 ## Types of State

diff --git a/projects/ngrx.io/content/guide/component-store/write.md b/projects/ngrx.io/content/guide/component-store/write.md
@@ -1,3 +1,12 @@
+<div class="alert is-helpful">
+
+**<a href="/guide/signals"><b>NgRx Signals</b></a> is the new default.**
+
+The NgRx team recommends using the `@ngrx/signals` library for local state management in Angular.
+While ComponentStore remains supported, we encourage using `@ngrx/signals` for new projects and considering migration for existing ones.
+
+</div>
+
 # Updating state
 
 ComponentStore can be updated in 3 ways:

diff --git a/projects/ngrx.io/content/marketing/docs.md b/projects/ngrx.io/content/marketing/docs.md
@@ -18,8 +18,8 @@ NgRx packages are divided into a few main categories
 - [Effects](guide/effects) - Side effect model for @ngrx/store.
 - [Router Store](guide/router-store) - Bindings to connect the Angular Router to @ngrx/store.
 - [Entity](guide/entity) - Entity State adapter for managing record collections.
-- [ComponentStore](guide/component-store) - Standalone library for managing local/component state.
 - [Signals](guide/signals) - Reactive store and set of utilities for Angular Signals.
+- [ComponentStore](guide/component-store) - Standalone library for managing local/component state.
 - [Operators](guide/operators) - Shared RxJS operators for NgRx libraries.
 
 ### Data

diff --git a/projects/ngrx.io/content/navigation.json b/projects/ngrx.io/content/navigation.json
@@ -217,52 +217,6 @@
             }
           ]
         },
-        {
-          "title": "@ngrx/component-store",
-          "children": [
-            {
-              "title": "Overview",
-              "url": "guide/component-store"
-            },
-            {
-              "title": "Installation",
-              "url": "guide/component-store/install"
-            },
-            {
-              "title": "Architecture",
-              "children": [
-                {
-                  "title": "Initialization",
-                  "url": "guide/component-store/initialization"
-                },
-                {
-                  "title": "Read",
-                  "url": "guide/component-store/read"
-                },
-                {
-                  "title": "Write",
-                  "url": "guide/component-store/write"
-                },
-                {
-                  "title": "Effects",
-                  "url": "guide/component-store/effect"
-                }
-              ]
-            },
-            {
-              "title": "Lifecycle",
-              "url": "guide/component-store/lifecycle"
-            },
-            {
-              "title": "ComponentStore vs Store",
-              "url": "guide/component-store/comparison"
-            },
-            {
-              "title": "Usage",
-              "url": "guide/component-store/usage"
-            }
-          ]
-        },
         {
           "title": "@ngrx/signals",
           "children": [
@@ -333,6 +287,52 @@
             }
           ]
         },
+        {
+          "title": "@ngrx/component-store",
+          "children": [
+            {
+              "title": "Overview",
+              "url": "guide/component-store"
+            },
+            {
+              "title": "Installation",
+              "url": "guide/component-store/install"
+            },
+            {
+              "title": "Architecture",
+              "children": [
+                {
+                  "title": "Initialization",
+                  "url": "guide/component-store/initialization"
+                },
+                {
+                  "title": "Read",
+                  "url": "guide/component-store/read"
+                },
+                {
+                  "title": "Write",
+                  "url": "guide/component-store/write"
+                },
+                {
+                  "title": "Effects",
+                  "url": "guide/component-store/effect"
+                }
+              ]
+            },
+            {
+              "title": "Lifecycle",
+              "url": "guide/component-store/lifecycle"
+            },
+            {
+              "title": "ComponentStore vs Store",
+              "url": "guide/component-store/comparison"
+            },
+            {
+              "title": "Usage",
+              "url": "guide/component-store/usage"
+            }
+          ]
+        },
         {
           "title": "@ngrx/operators",
           "children": [