docs: use takeUntilDestroyed in component viewer (#33876)

Clean up the subscriptions in `ComponentViewer` and `ComponentBaseView` with
`takeUntilDestroyed` instead of a manual `Subject` and `ngOnDestroy`. Also
remove the unused `Subscription` from `NavBar`.

Author: MeAkib

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

@@ -12,16 +12,17 @@ import {
   ChangeDetectorRef,
   Component,
   Directive,
-  OnDestroy,
   OnInit,
   ViewEncapsulation,
   viewChild,
   viewChildren,
   inject,
+  DestroyRef,
 } from '@angular/core';
+import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {ActivatedRoute, Router, RouterLinkActive, RouterLink, RouterOutlet} from '@angular/router';
-import {combineLatest, Observable, ReplaySubject, Subject} from 'rxjs';
-import {map, skip, switchMap, takeUntil} from 'rxjs/operators';
+import {combineLatest, Observable, ReplaySubject} from 'rxjs';
+import {map, skip, switchMap} from 'rxjs/operators';
 import {DocItem, DocumentationItems} from '../../shared/documentation-items/documentation-items';
 import {TableOfContents} from '../../shared/table-of-contents/table-of-contents';
 
@@ -46,14 +47,14 @@ import {MatTabLink, MatTabNav, MatTabNavPanel} from '@angular/material/tabs';
     RouterOutlet,
   ],
 })
-export class ComponentViewer implements OnDestroy {
+export class ComponentViewer {
   private _router = inject(Router);
   componentPageTitle = inject(ComponentPageTitle);
   readonly docItems = inject(DocumentationItems);
+  private readonly _destroyRef = inject(DestroyRef);
 
   componentDocItem = new ReplaySubject<DocItem>(1);
   sections: Set<string> = new Set(['overview', 'api']);
-  private _destroyed = new Subject<void>();
 
   constructor() {
     const route = inject(ActivatedRoute);
@@ -74,7 +75,7 @@ export class ComponentViewer implements OnDestroy {
           const doc = await docItems.getItemById(id, section);
           return {doc, section};
         }),
-        takeUntil(this._destroyed),
+        takeUntilDestroyed(this._destroyRef),
       )
       .subscribe(({doc, section}) => {
         if (!doc) {
@@ -98,11 +99,6 @@ export class ComponentViewer implements OnDestroy {
         }
       });
   }
-
-  ngOnDestroy(): void {
-    this._destroyed.next();
-    this._destroyed.complete();
-  }
 }
 
 /**
@@ -111,15 +107,15 @@ export class ComponentViewer implements OnDestroy {
  * the table of contents headers.
  */
 @Directive()
-export class ComponentBaseView implements OnInit, OnDestroy {
+export class ComponentBaseView implements OnInit {
   componentViewer = inject(ComponentViewer);
   private _changeDetectorRef = inject(ChangeDetectorRef);
+  private readonly _destroyRef = inject(DestroyRef);
 
   readonly tableOfContents = viewChild<TableOfContents>('toc');
   readonly viewers = viewChildren(DocViewer);
 
   showToc: Observable<boolean>;
-  private _destroyed = new Subject<void>();
 
   constructor() {
     const breakpointObserver = inject(BreakpointObserver);
@@ -133,14 +129,16 @@ export class ComponentBaseView implements OnInit, OnDestroy {
   }
 
   ngOnInit() {
-    this.componentViewer.componentDocItem.pipe(takeUntil(this._destroyed)).subscribe(() => {
-      const tableOfContents = this.tableOfContents();
-      if (tableOfContents) {
-        tableOfContents.resetHeaders();
-      }
-    });
+    this.componentViewer.componentDocItem
+      .pipe(takeUntilDestroyed(this._destroyRef))
+      .subscribe(() => {
+        const tableOfContents = this.tableOfContents();
+        if (tableOfContents) {
+          tableOfContents.resetHeaders();
+        }
+      });
 
-    this.showToc.pipe(skip(1), takeUntil(this._destroyed)).subscribe(() => {
+    this.showToc.pipe(skip(1), takeUntilDestroyed(this._destroyRef)).subscribe(() => {
       if (this.tableOfContents()) {
         this.viewers().forEach(viewer => {
           viewer.contentRendered.emit(viewer._elementRef.nativeElement);
@@ -149,11 +147,6 @@ export class ComponentBaseView implements OnInit, OnDestroy {
     });
   }
 
-  ngOnDestroy() {
-    this._destroyed.next();
-    this._destroyed.complete();
-  }
-
   updateTableOfContents(sectionName: string, docViewerContent: HTMLElement, sectionIndex = 0) {
     const tableOfContents = this.tableOfContents();
     if (tableOfContents) {

docs/src/app/shared/navbar/navbar.ts

@@ -6,13 +6,12 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {ChangeDetectionStrategy, Component, OnDestroy, inject} from '@angular/core';
+import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
 import {NgTemplateOutlet} from '@angular/common';
 import {MatButton, MatIconButton} from '@angular/material/button';
 import {RouterLink, RouterLinkActive} from '@angular/router';
 
 import {SECTIONS} from '../documentation-items/documentation-items';
-import {Subscription} from 'rxjs';
 import {NavigationFocusService} from '../navigation-focus/navigation-focus.service';
 import {ThemePicker} from '../theme-picker/theme-picker';
 import {VersionPicker} from '../version-picker/version-picker';
@@ -36,10 +35,9 @@ const SECTIONS_KEYS = Object.keys(SECTIONS);
     NgTemplateOutlet,
   ],
 })
-export class NavBar implements OnDestroy {
+export class NavBar {
   private _navigationFocusService = inject(NavigationFocusService);
 
-  private _subscriptions = new Subscription();
   isNextVersion = location.hostname === 'next.material.angular.dev';
   skipLinkHref: string | null | undefined;
   skipLinkHidden = true;
@@ -55,8 +53,4 @@ export class NavBar implements OnDestroy {
   get sectionKeys() {
     return SECTIONS_KEYS;
   }
-
-  ngOnDestroy() {
-    this._subscriptions.unsubscribe();
-  }
 }