docs: update guide viewer title when route params change (#33878)

`GuideViewer` subscribed to the route params to resolve the current guide,
but only set the page title once in `ngOnInit`. Since the router reuses the
component when only the `:id` param changes, navigating from one guide to
another in-app would update the rendered guide while leaving the browser
title pointing at the previous one.

This isn't reachable today because guide-to-guide links in the markdown are
absolute URLs that trigger a full page load, but it would surface as soon
as an in-app link between guides is added.

Changes:
- Set the page title inside the params subscription, next to where the
  guide is resolved, so both stay in sync on every param emission.
- Remove the now-redundant `ngOnInit` and the `OnInit` interface.
- Tie the params subscription to the component's lifetime with
  `takeUntilDestroyed()`, matching the pattern used in `ComponentViewer`.
- Switch the spec's mocked `params` to a `BehaviorSubject` and add tests
  covering the initial title and the title after a param change.

Author: MeAkib

docs/src/app/pages/guide-viewer/guide-viewer.spec.ts

@@ -1,24 +1,25 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
-import {Observable} from 'rxjs';
-import {ActivatedRoute, provideRouter} from '@angular/router';
+import {BehaviorSubject, Observable} from 'rxjs';
+import {ActivatedRoute, Params, provideRouter} from '@angular/router';
 import {GuideViewer} from './guide-viewer';
+import {ComponentPageTitle} from '../page-title/page-title';
 
 const guideItemsId = 'getting-started';
 
-const mockActivatedRoute = {
-  fragment: new Observable(observer => {
-    observer.complete();
-  }),
-  params: new Observable(observer => {
-    observer.next({id: guideItemsId});
-    observer.complete();
-  }),
-};
-
 describe('GuideViewer', () => {
   let fixture: ComponentFixture<GuideViewer>;
+  let params: BehaviorSubject<Params>;
 
   beforeEach(() => {
+    params = new BehaviorSubject<Params>({id: guideItemsId});
+
+    const mockActivatedRoute = {
+      fragment: new Observable(observer => {
+        observer.complete();
+      }),
+      params,
+    };
+
     TestBed.configureTestingModule({
       providers: [provideRouter([]), {provide: ActivatedRoute, useValue: mockActivatedRoute}],
     });
@@ -33,4 +34,24 @@ describe('GuideViewer', () => {
     fixture.detectChanges();
     expect(component.guide()).toEqual(component.guideItems.getItemById(guideItemsId));
   });
+
+  it('should set the page title to the guide name', () => {
+    const component = fixture.componentInstance;
+    fixture.detectChanges();
+    expect(TestBed.inject(ComponentPageTitle).title).toBe(
+      component.guideItems.getItemById(guideItemsId)!.name,
+    );
+  });
+
+  it('should update the guide and page title when the route params change', () => {
+    const component = fixture.componentInstance;
+    fixture.detectChanges();
+
+    params.next({id: 'theming'});
+    fixture.detectChanges();
+
+    const theming = component.guideItems.getItemById('theming')!;
+    expect(component.guide()).toEqual(theming);
+    expect(TestBed.inject(ComponentPageTitle).title).toBe(theming.name);
+  });
 });

docs/src/app/pages/guide-viewer/guide-viewer.ts

@@ -6,7 +6,8 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {ChangeDetectionStrategy, Component, OnInit, inject, signal} from '@angular/core';
+import {ChangeDetectionStrategy, Component, inject, signal} from '@angular/core';
+import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {ActivatedRoute, Router} from '@angular/router';
 import {GuideItem, GuideItems} from '../../shared/guide-items/guide-items';
 import {Footer} from '../../shared/footer/footer';
@@ -26,7 +27,7 @@ import {DocViewer} from '../../shared/doc-viewer/doc-viewer';
     'class': 'docs-main-content',
   },
 })
-export class GuideViewer implements OnInit {
+export class GuideViewer {
   private readonly _componentPageTitle = inject(ComponentPageTitle);
   private readonly _router = inject(Router);
   guideItems = inject(GuideItems);
@@ -37,21 +38,16 @@ export class GuideViewer implements OnInit {
     const _route = inject(ActivatedRoute);
     const guideItems = this.guideItems;
 
-    _route.params.subscribe(p => {
+    _route.params.pipe(takeUntilDestroyed()).subscribe(p => {
       const guideItem = guideItems.getItemById(p['id']);
       if (guideItem) {
         this.guide.set(guideItem);
+        this._componentPageTitle.title = guideItem.name;
       }
 
       if (!this.guide()) {
         this._router.navigate(['/guides']);
       }
     });
   }
-
-  ngOnInit(): void {
-    if (this.guide() !== undefined) {
-      this._componentPageTitle.title = this.guide()!.name;
-    }
-  }
 }