docs(docs-infra): mark properties as readonly if they shouldn't change (angular#63200)

PR Close angular#63200

Author: MeAkib

adev/shared-docs/components/cookie-popup/cookie-popup.component.ts

@@ -11,7 +11,7 @@ import {LOCAL_STORAGE} from '../../providers/index';
 import {setCookieConsent} from '../../utils';
 
 /**
- * Decelare gtag as part of the window in this file as gtag is expected to already be loaded.
+ * Declare gtag as part of the window in this file as gtag is expected to already be loaded.
  */
 declare const window: Window & typeof globalThis & {gtag?: Function};
 

adev/shared-docs/components/search-dialog/search-dialog.component.ts

@@ -51,10 +51,10 @@ import {SearchHistoryComponent} from '../search-history/search-history.component
   styleUrls: ['./search-dialog.component.scss'],
 })
 export class SearchDialog {
-  onClose = output();
-  dialog = viewChild.required<ElementRef<HTMLDialogElement>>('searchDialog');
-  items = viewChildren(SearchItem);
-  textField = viewChild(TextField);
+  readonly onClose = output();
+  readonly dialog = viewChild.required<ElementRef<HTMLDialogElement>>('searchDialog');
+  readonly items = viewChildren(SearchItem);
+  readonly textField = viewChild(TextField);
 
   readonly history = inject(SearchHistory);
   private readonly search = inject(Search);
@@ -67,9 +67,9 @@ export class SearchDialog {
     this.injector,
   ).withWrap();
 
-  searchQuery = this.search.searchQuery;
-  resultsResource = this.search.resultsResource;
-  searchResults = this.search.searchResults;
+  readonly searchQuery = this.search.searchQuery;
+  readonly resultsResource = this.search.resultsResource;
+  readonly searchResults = this.search.searchResults;
 
   // We use a FormControl instead of relying on NgModel+signal to avoid
   // the issue https://github.com/angular/angular/issues/13568

adev/shared-docs/components/top-level-banner/top-level-banner.component.ts

@@ -29,16 +29,16 @@ export class TopLevelBannerComponent {
    * separately for different events or instances. Without a unique ID,
    * closing one banner could inadvertently hide other banners for different events.
    */
-  id = input.required<string>();
+  readonly id = input.required<string>();
   // Optional URL link that the banner should navigate to when clicked.
-  link = input<string>();
+  readonly link = input<string>();
   // Text content to be displayed in the banner.
-  text = input.required<string>();
+  readonly text = input.required<string>();
   // Optional expiry date. Setting the default expiry as a future date so we
   // don't have to deal with undefined signal values.
-  expiry = input(new Date('3000-01-01'), {transform: parseDate});
+  readonly expiry = input(new Date('3000-01-01'), {transform: parseDate});
   // Whether the user has closed the banner or the survey has expired.
-  hasClosed = linkedSignal(() => {
+  readonly hasClosed = linkedSignal(() => {
     const expired = Date.now() > this.expiry().getTime();
 
     // Needs to be in a try/catch, because some browsers will

adev/shared-docs/components/viewers/docs-viewer/docs-viewer.component.ts

@@ -61,8 +61,8 @@ export const GITHUB_CONTENT_URL = 'https://github.com/angular/angular/blob/main/
   },
 })
 export class DocViewer {
-  docContent = input<string | undefined>();
-  hasToc = input(false);
+  readonly docContent = input<string | undefined>();
+  readonly hasToc = input(false);
   readonly contentLoaded = output<void>();
 
   private readonly destroyRef = inject(DestroyRef);

adev/src/app/features/docs/docs.component.ts

@@ -21,5 +21,5 @@ export default class DocsComponent {
   // In case when exists example-viewer placeholders, then ExampleViewer
   // components are going to be rendered.
 
-  docContent = input<DocContent>();
+  readonly docContent = input<DocContent>();
 }

adev/src/app/features/home/components/home-animation/home-animation.component.ts

@@ -15,7 +15,6 @@ import {
   inject,
   Injector,
   input,
-  OnDestroy,
   output,
   signal,
   viewChildren,

adev/src/app/features/home/components/home-editor.component.ts

@@ -35,7 +35,7 @@ export class CodeEditorComponent {
   private readonly environmentInjector = inject(EnvironmentInjector);
   private readonly destroyRef = inject(DestroyRef);
 
-  tutorialFiles = input.required<string>();
+  readonly tutorialFiles = input.required<string>();
 
   constructor() {
     this.loadEmbeddedEditor();

adev/src/app/features/references/api-items-section/api-items-section.component.ts

@@ -20,5 +20,5 @@ import {MatTooltipModule} from '@angular/material/tooltip';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export default class ApiItemsSection {
-  group = input.required<ApiItemsGroup>();
+  readonly group = input.required<ApiItemsGroup>();
 }

adev/src/app/features/references/api-reference-details-page/api-reference-details-page.component.ts

@@ -32,8 +32,8 @@ export default class ApiReferenceDetailsPage {
 
   private highlightedElement: HTMLElement | null = null;
 
-  docContent = input<DocContent | undefined>();
-  urlFragment = toSignal(this.route.fragment);
+  readonly docContent = input<DocContent | undefined>();
+  readonly urlFragment = toSignal(this.route.fragment);
 
   constructor() {
     effect(() => this.highlightCard());

adev/src/app/features/references/api-reference-list/api-reference-list.component.ts

@@ -65,9 +65,9 @@ export default class ApiReferenceList {
   private readonly injector = inject(EnvironmentInjector);
 
   // inputs
-  queryInput = input<string | undefined>('', {alias: 'query'});
-  typeInput = input<string | undefined>(ALL_TYPES_KEY, {alias: 'type'});
-  statusInput = input<number | undefined>(DEFAULT_STATUS, {alias: 'status'});
+  readonly queryInput = input<string | undefined>('', {alias: 'query'});
+  readonly typeInput = input<string | undefined>(ALL_TYPES_KEY, {alias: 'type'});
+  readonly statusInput = input<number | undefined>(DEFAULT_STATUS, {alias: 'status'});
 
   // inputs are route binded, they can reset to undefined
   // also we want a writable state, so we use a linked signal