+
+
+ @for (tab of tabs(); track tab) {
+
+
+
+ }
+
+ `,
+ styles: [
+ `
+ ngrx-code-example {
+ margin: 0;
+ }
+ `,
+ ],
+})
+export class CodeTabsComponent implements OnInit {
+ private domSanitizer = inject(DomSanitizer);
+ private content = viewChild.required('content');
+ protected tabs = signal([]);
+
+ ngOnInit() {
+ const codeExamples =
+ this.content().nativeElement.querySelectorAll('ngrx-code-example') ?? [];
+ const examples: TabInfo[] = [...codeExamples].map((example) =>
+ this.extractTabInfo(example)
+ );
+ this.tabs.set(examples);
+ }
+
+ private extractTabInfo(tabContent: HTMLElement): TabInfo {
+ return {
+ code: this.domSanitizer.bypassSecurityTrustHtml(
+ tabContent.querySelector('pre')?.parentElement?.innerHTML ?? ''
+ ),
+ header: tabContent.getAttribute('header') || '',
+ };
+ }
+}
+
+export interface TabInfo {
+ code: SafeHtml;
+ header: string;
+}
diff --git a/projects/www/src/app/components/docs/markdown-article.component.ts b/projects/www/src/app/components/docs/markdown-article.component.ts
index eb3d12d2ae..1d44374197 100644
--- a/projects/www/src/app/components/docs/markdown-article.component.ts
+++ b/projects/www/src/app/components/docs/markdown-article.component.ts
@@ -192,7 +192,6 @@ export class MarkdownArticleComponent implements OnDestroy {
}
private watchHeadings() {
- console.log('watchHeadings');
if (this.intersectionObserver) {
this.intersectionObserver.disconnect();
this.intersectionObserver = undefined;
diff --git a/projects/www/src/app/pages/guide/component-store/usage.md b/projects/www/src/app/pages/guide/component-store/usage.md
index 03f13c2353..678e9ef39d 100644
--- a/projects/www/src/app/pages/guide/component-store/usage.md
+++ b/projects/www/src/app/pages/guide/component-store/usage.md
@@ -82,16 +82,13 @@ You can see the full example at StackBlitz:
-
-
-
-
-
+
+
+
+
+
+
+
Below are the steps of integrating `ComponentStore` into a component.
@@ -151,7 +148,7 @@ When it is called with a callback, the state is updated.
header="src/app/slide-toggle.component.ts"
path="component-store-slide-toggle/src/app/slide-toggle.component.ts"
region="init">
-
+
```ts
constructor(
private readonly componentStore: ComponentStore
@@ -177,7 +174,7 @@ When a user clicks the toggle (triggering a 'change' event), instead of calling
header="src/app/slide-toggle.component.ts"
path="component-store-slide-toggle/src/app/slide-toggle.component.ts"
region="updater">
-
+
```ts
@Input() set checked(value: boolean) {
this.setChecked(value);
@@ -210,6 +207,21 @@ Finally, the state is aggregated with selectors into two properties:
This example does not have a lot of business logic, however it is still fully reactive.
+
+
+
+
+
+
+
+
+
### Example 2: Service extending ComponentStore
`SlideToggleComponent` is a fairly simple component and having `ComponentStore` within the component itself is still manageable. When components takes more Inputs and/or has more events within its template, it becomes larger and harder to read/maintain.
@@ -239,21 +251,6 @@ You can see the examples at StackBlitz:
-
-
-
-
-
-
-
-
-
#### Updating the state
With `ComponentStore` extracted into `PaginatorStore`, the developer is now using updaters and effects to update the state. `@Input` values are passed directly into `updater`s as their arguments.
@@ -316,19 +313,19 @@ changePageSize(newPageSize: number) {
`PaginatorStore` exposes the two properties: `vm$` for an aggregated _ViewModel_ to be used in the template and `page$` that would emit whenever data aggregated from a `PageEvent` changes.
-
-
+
-
-
+
-
-
+
+
diff --git a/projects/www/src/app/pages/guide/signals/signal-state.md b/projects/www/src/app/pages/guide/signals/signal-state.md
index 0c7e41ed40..11ade923fd 100644
--- a/projects/www/src/app/pages/guide/signals/signal-state.md
+++ b/projects/www/src/app/pages/guide/signals/signal-state.md
@@ -159,8 +159,10 @@ export class Counter {
### Example 2: SignalState in a Service
-
-
+
+
+
+
```ts
import { inject, Injectable } from '@angular/core';
@@ -204,9 +206,9 @@ export class BookListStore {
}
```
-
+
-
+
```ts
import {
@@ -244,5 +246,5 @@ export class BookList {
}
```
-
-
+
+
diff --git a/projects/www/src/app/pages/guide/signals/signal-store/private-store-members.md b/projects/www/src/app/pages/guide/signals/signal-store/private-store-members.md
index 9c523ff8a9..e8579aed4e 100644
--- a/projects/www/src/app/pages/guide/signals/signal-store/private-store-members.md
+++ b/projects/www/src/app/pages/guide/signals/signal-store/private-store-members.md
@@ -3,8 +3,9 @@
SignalStore allows defining private members that cannot be accessed from outside the store by using the `_` prefix.
This includes root-level state slices, properties, and methods.
-
-
+
+
+
```ts
import { computed } from '@angular/core';
@@ -46,9 +47,10 @@ export const CounterStore = signalStore(
);
```
-
+
+
+
-
```ts
import { Component, inject, OnInit } from '@angular/core';
@@ -75,7 +77,8 @@ export class Counter implements OnInit {
this.store._increment2(); // ❌
}
}
+}
```
-
-
+
+
\ No newline at end of file