docs: migrate to signals and takeUntilDestroyed

- Replace lifecycle hooks with constructor initialization
- Convert properties to signals (items, section, _categoryListSummary)
- Use takeUntilDestroyed() for automatic cleanup
- Replace async/await with switchMap to prevent race conditions
- Remove manual subscription management

Benefits: Better performance, automatic cleanup, safer async handling

Author: MeAkib

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,42 @@ import {
 import {NavigationFocus} from '../../shared/navigation-focus/navigation-focus';
 
 import {ComponentPageTitle} from '../page-title/page-title';
+import {map, switchMap, takeUntil} 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() {
+    combineLatest(this._route.pathFromRoot.map(route => route.params))
+      .pipe(
+        map(paramsArray => Object.assign({}, ...paramsArray)),
+        switchMap(params => {
+          const sectionName = params['section'];
+          const section = SECTIONS[sectionName];
+
+          this._componentPageTitle.title = section.name;
+          this._categoryListSummary.set(section.summary);
+          this.section.set(sectionName);
 
-  ngOnDestroy() {
-    if (this.routeParamSubscription) {
-      this.routeParamSubscription.unsubscribe();
-    }
+          return this._docItems.getItems(sectionName);
+        }),
+        takeUntilDestroyed(),
+      )
+      .subscribe(items => {
+        this.items.set(items);
+      });
   }
 }