docs: apply Angular’s recommended guidelines (#31908)

Author: MeAkib

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

@@ -27,9 +27,9 @@ import {ComponentPageTitle} from '../page-title/page-title';
   imports: [NavigationFocus, RouterLink, MatRipple],
 })
 export class ComponentCategoryList implements OnInit, OnDestroy {
-  readonly _docItems = inject(DocumentationItems);
-  private _componentPageTitle = inject(ComponentPageTitle);
-  private _route = inject(ActivatedRoute);
+  private readonly _docItems = inject(DocumentationItems);
+  private readonly _componentPageTitle = inject(ComponentPageTitle);
+  private readonly _route = inject(ActivatedRoute);
 
   items: DocItem[] = [];
   section = '';

docs/src/app/pages/component-page-header/component-page-header.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {Component, EventEmitter, Output} from '@angular/core';
+import {Component, output} from '@angular/core';
 
 import {MatButton} from '@angular/material/button';
 import {MatIcon} from '@angular/material/icon';
@@ -18,5 +18,5 @@ import {MatIcon} from '@angular/material/icon';
   imports: [MatButton, MatIcon],
 })
 export class ComponentPageHeader {
-  @Output() toggleSidenav = new EventEmitter<void>();
+  readonly toggleSidenav = output<void>();
 }

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

@@ -25,8 +25,8 @@ import {MatRipple} from '@angular/material/core';
   },
 })
 export class GuideList implements OnInit {
-  guideItems = inject(GuideItems);
-  _componentPageTitle = inject(ComponentPageTitle);
+  readonly guideItems = inject(GuideItems);
+  private readonly _componentPageTitle = inject(ComponentPageTitle);
 
   ngOnInit(): void {
     this._componentPageTitle.title = 'Guides';

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

@@ -1,11 +1,13 @@
 <div class="docs-guide-wrapper">
   <div class="docs-guide-toc-and-content">
-    <doc-viewer class="docs-guide-content"
-                (contentRendered)="toc.addHeaders('Guide Content', $event); toc.updateScrollPosition()"
-                [document]="guide?.document"
-                focusOnNavigation
-                id="guide-content"
-                aria-label="Guide content" />
+    <doc-viewer
+      class="docs-guide-content"
+      (contentRendered)="toc.addHeaders('Guide Content', $event); toc.updateScrollPosition()"
+      [document]="guide()?.document"
+      focusOnNavigation
+      id="guide-content"
+      aria-label="Guide content"
+    />
     <table-of-contents #toc container="guide-viewer" />
   </div>
 </div>

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

@@ -36,6 +36,6 @@ describe('GuideViewer', () => {
   it('should set the guide based off route params', () => {
     const component = fixture.componentInstance;
     fixture.detectChanges();
-    expect(component.guide).toEqual(component.guideItems.getItemById(guideItemsId));
+    expect(component.guide()).toEqual(component.guideItems.getItemById(guideItemsId));
   });
 });

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

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

docs/src/app/pages/homepage/homepage.html

@@ -53,7 +53,7 @@ <h2>Featured components</h2>
       </a>
     </div>
     <app-carousel [aria-label]="'Featured components'">
-      @for (comp of getTopComponents(); track comp) {
+      @for (comp of topComponents; track comp) {
         <a carousel-item class="docs-carousel-item docs-featured-components-carousel-item"
            routerLink="/components/{{comp}}">
           <div class="docs-homepage-img-container">

docs/src/app/pages/homepage/homepage.ts

@@ -50,14 +50,12 @@ const TOP_COMPONENTS = ['datepicker', 'input', 'slide-toggle', 'slider', 'button
   },
 })
 export class Homepage implements OnInit {
-  _componentPageTitle = inject(ComponentPageTitle);
-  guideItems = inject(GuideItems);
+  private readonly _componentPageTitle = inject(ComponentPageTitle);
+  protected readonly guideItems = inject(GuideItems);
+
+  protected readonly topComponents = TOP_COMPONENTS;
 
   ngOnInit(): void {
     this._componentPageTitle.title = '';
   }
-
-  getTopComponents(): string[] {
-    return TOP_COMPONENTS;
-  }
 }