+ "contents": "\n\n\n <div class=\"github-links\">\n <a href=\"https://github.com/ngrx/platform/edit/main/projects/ngrx.io/content/guide/component-store/index.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n </div>\n\n\n<div class=\"content\">\n<div class=\"alert is-helpful\">\n<p><strong><a href=\"/guide/signals\"><b>NgRx Signals</b></a> is the new default.</strong></p>\n<p>The NgRx team recommends using the <code>@ngrx/signals</code> library for local state management in Angular.\nWhile ComponentStore remains supported, we encourage using <code>@ngrx/signals</code> for new projects and considering migration for existing ones.</p>\n</div>\n<h1 id=\"ngrxcomponent-store\">@ngrx/component-store<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/component-store#ngrxcomponent-store\"><i class=\"material-icons\">link</i></a></h1>\n<p>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.</p>\n<h2 id=\"key-concepts\">Key Concepts<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/component-store#key-concepts\"><i class=\"material-icons\">link</i></a></h2>\n<ul>\n<li>Local state has to be initialized, but it can be done lazily.</li>\n<li>Local state is typically tied to the life-cycle of a particular component and is cleaned up when that component is destroyed.</li>\n<li>Users of ComponentStore can update the state through <code>setState</code> or <code>updater</code>, either imperatively or by providing an Observable.</li>\n<li>Users of ComponentStore can read the state through <code><a href=\"api/store/select\" class=\"code-anchor\">select</a></code> or a top-level <code><a href=\"api/component-store/ComponentStore#state$\" class=\"code-anchor\">state$</a></code>. Selectors are very performant.</li>\n<li>Users of ComponentStore may start side-effects with <code><a href=\"api/effects/EffectNotification#effect\" class=\"code-anchor\">effect</a></code>, both sync and async, and feed the data both imperatively or reactively.</li>\n</ul>\n<p>The details about <a href=\"guide/component-store/initialization\">initialization</a>, <a href=\"guide/component-store/write\">writing</a> and <a href=\"guide/component-store/read\">reading</a> from state,\nand <a href=\"guide/component-store/effect\">side-effects</a> management can be found in the corresponding sections of the Architecture.</p>\n<h2 id=\"installation\">Installation<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/component-store#installation\"><i class=\"material-icons\">link</i></a></h2>\n<p>Detailed installation instructions can be found on the <a href=\"guide/component-store/install\">Installation</a> page.</p>\n<h2 id=\"ngrxstore-or-ngrxcomponent-store\">@ngrx/store or @ngrx/component-store?<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/component-store#ngrxstore-or-ngrxcomponent-store\"><i class=\"material-icons\">link</i></a></h2>\n<p>The Global Store and Component Store are designed to solve different problems and can be used independently from each other. The detailed comparison can\nbe found at <a href=\"guide/component-store/comparison\">Store vs ComponentStore</a> section.</p>\n\n</div>\n\n<!-- links to this doc:\n - docs\n - guide/store\n - guide/store/why\n-->\n<!-- links from this doc:\n - /guide/signals\n - api/component-store/ComponentStore#state$\n - api/effects/EffectNotification#effect\n - api/store/select\n - guide/component-store#installation\n - guide/component-store#key-concepts\n - guide/component-store#ngrxcomponent-store\n - guide/component-store#ngrxstore-or-ngrxcomponent-store\n - guide/component-store/comparison\n - guide/component-store/effect\n - guide/component-store/initialization\n - guide/component-store/install\n - guide/component-store/read\n - guide/component-store/write\n - https://github.com/ngrx/platform/edit/main/projects/ngrx.io/content/guide/component-store/index.md?message=docs%3A%20describe%20your%20change...\n-->"
0 commit comments