docs: migrate to signals and takeUntilDestroyed

docs/src/app/pages/component-category-list/component-category-list.html

@@ -1,21 +1,27 @@
-<div class="docs-component-category-list-summary docs-markdown"
-     id="category-summary"
-     focusOnNavigation>
-  <div [innerHTML]="_categoryListSummary"></div>
+<div
+  class="docs-component-category-list-summary docs-markdown"
+  id="category-summary"
+  focusOnNavigation
+>
+  <div [innerHTML]="_categoryListSummary()"></div>
 </div>
-@if (items.length > 0) {
+@if (items().length > 0) {
   <div class="docs-component-category-list">
-    @for (component of items; track component) {
-      <a class="docs-component-category-list-item"
-         [routerLink]="'/' + section + '/' + component.id">
+    @for (component of items(); track component.id) {
+      <a
+        class="docs-component-category-list-item"
+        [routerLink]="'/' + section() + '/' + component.id"
+      >
         <div class="docs-component-category-list-card" matRipple>
-          @if (section === 'components') {
-            <img class="docs-component-category-list-card-image-wrapper"
-                [src]="'../../../assets/screenshots/' + component.id + '.scene.png'"
-                loading="lazy"
-                alt=""
-                role="presentation"
-                aria-hidden="true">
+          @if (section() === 'components') {
+            <img
+              class="docs-component-category-list-card-image-wrapper"
+              [src]="'../../../assets/screenshots/' + component.id + '.scene.png'"
+              loading="lazy"
+              alt=""
+              role="presentation"
+              aria-hidden="true"
+            />
           }
           <div class="docs-component-category-list-card-title">{{component.name}}</div>
           <div class="docs-component-category-list-card-summary">{{component.summary}}</div>

docs/src/app/pages/component-category-list/component-category-list.ts

@@ -6,10 +6,10 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {Component, OnDestroy, OnInit, inject} from '@angular/core';
+import {Component, inject, signal} from '@angular/core';
 import {ActivatedRoute, RouterLink} from '@angular/router';
 import {MatRipple} from '@angular/material/core';
-import {combineLatest, Subscription} from 'rxjs';
+import {combineLatest} from 'rxjs';
 
 import {
   DocItem,
@@ -19,40 +19,63 @@ import {
 import {NavigationFocus} from '../../shared/navigation-focus/navigation-focus';
 
 import {ComponentPageTitle} from '../page-title/page-title';
+import {map, switchMap} from 'rxjs/operators';
+import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'app-component-category-list',
   templateUrl: './component-category-list.html',
   styleUrls: ['./component-category-list.scss'],
   imports: [NavigationFocus, RouterLink, MatRipple],
 })
-export class ComponentCategoryList implements OnInit, OnDestroy {
+export class ComponentCategoryList {
   private readonly _docItems = inject(DocumentationItems);
   private readonly _componentPageTitle = inject(ComponentPageTitle);
   private readonly _route = inject(ActivatedRoute);
 
-  items: DocItem[] = [];
-  section = '';
-  routeParamSubscription: Subscription = new Subscription();
-  _categoryListSummary: string | undefined;
-
-  ngOnInit() {
-    this.routeParamSubscription = combineLatest(
-      this._route.pathFromRoot.map(route => route.params),
-      Object.assign,
-    ).subscribe(async params => {
-      const sectionName = params['section'];
-      const section = SECTIONS[sectionName];
-      this._componentPageTitle.title = section.name;
-      this._categoryListSummary = section.summary;
-      this.section = sectionName;
-      this.items = await this._docItems.getItems(sectionName);
-    });
-  }
+  readonly items = signal<DocItem[]>([]);
+  readonly section = signal<string>('');
+  readonly _categoryListSummary = signal<string | undefined>(undefined);
+
+  constructor() {
+    // Combine all route parameters from root to current route into a single observable
+    // pathFromRoot gives us the entire route hierarchy (e.g., /docs/:category/:section)
+    combineLatest(this._route.pathFromRoot.map(route => route.params))
+      .pipe(
+        // Merge all parameter objects into one, with child route params overriding parent params
+        // Example: [{category: 'components'}, {section: 'button'}] becomes {category: 'components', section: 'button'}
+        map(paramsArray => paramsArray.reduce((acc, curr) => ({...acc, ...curr}), {})),
+
+        // Switch to a new observable when params change, canceling any pending requests
+        // This prevents race conditions if the user navigates quickly between sections
+        switchMap(params => {
+          // Extract the section name from route parameters
+          const sectionName = params['section'];
+
+          // Look up section metadata from the SECTIONS configuration
+          const section = SECTIONS[sectionName];
+
+          // Update page title in browser tab/window
+          this._componentPageTitle.title = section.name;
+
+          // Update component state with section summary (displayed in UI)
+          this._categoryListSummary.set(section.summary);
+
+          // Store current section name
+          this.section.set(sectionName);
+
+          // Fetch documentation items for this section from the service
+          // switchMap will cancel this request if route params change before completion
+          return this._docItems.getItems(sectionName);
+        }),
 
-  ngOnDestroy() {
-    if (this.routeParamSubscription) {
-      this.routeParamSubscription.unsubscribe();
-    }
+        // Automatically unsubscribe when component is destroyed (no manual cleanup needed)
+        takeUntilDestroyed(),
+      )
+      .subscribe(items => {
+        // Update the items signal with fetched documentation items
+        // This triggers change detection and updates the template
+        this.items.set(items);
+      });
   }
 }