From c65259c8a5a7cf9bbc358f79bc59e561fdb4b5ca Mon Sep 17 00:00:00 2001
From: Gerome Grignon <gerome.grignon.lp2@gmail.com>
Date: Mon, 10 Mar 2025 00:19:16 +0100
Subject: [PATCH] docs: lint code examples (#59979)

PR Close #59979
---
 .../src/app/app.component.html                |  4 +-
 .../dynamic-form/src/app/app.component.ts     |  2 +-
 .../src/app/dynamic-form.component.html       |  2 +-
 .../src/app/dynamic-form.component.ts         | 15 ++--
 .../form-validation/src/app/app.component.ts  |  9 +-
 .../actor-form-reactive.component.html        | 59 ++++++------
 .../actor-form-template.component.html        | 90 ++++++++++---------
 .../template/actor-form-template.component.ts |  8 +-
 .../forms-overview/src/app/app.component.html |  4 +-
 .../app/actor-form/actor-form.component.html  | 12 ++-
 .../app/actor-form/actor-form.component.ts    |  3 +-
 .../examples/forms/src/app/app.component.html |  2 +-
 .../src/app/app.component.1.html              |  6 +-
 .../reactive-forms/src/app/app.component.html |  8 +-
 .../reactive-forms/src/app/app.component.ts   | 18 ++--
 .../profile-editor.component.1.html           |  2 +-
 .../profile-editor.component.html             |  4 +-
 .../profile-editor.component.ts               |  3 +-
 .../src/app/app.component.html                |  4 +-
 .../examples/testing/src/app/demo/demo.ts     | 14 +--
 20 files changed, 144 insertions(+), 125 deletions(-)

diff --git a/adev/src/content/examples/attribute-directives/src/app/app.component.html b/adev/src/content/examples/attribute-directives/src/app/app.component.html
index c8eb07c6a6b..0c6c52f0416 100644
--- a/adev/src/content/examples/attribute-directives/src/app/app.component.html
+++ b/adev/src/content/examples/attribute-directives/src/app/app.component.html
@@ -17,13 +17,13 @@
 </p>
 <!-- #enddocregion defaultColor, -->
 
-<hr />
+<hr>
 <h2>Mouse over the following lines to see fixed highlights</h2>
 
 <p [appHighlight]="'yellow'">Highlighted in yellow</p>
 <p appHighlight="orange">Highlighted in orange</p>
 
-<hr />
+<hr>
 
 <h2>ngNonBindable</h2>
 <!-- #docregion ngNonBindable -->
diff --git a/adev/src/content/examples/dynamic-form/src/app/app.component.ts b/adev/src/content/examples/dynamic-form/src/app/app.component.ts
index 35487ed06ee..245074c77c3 100644
--- a/adev/src/content/examples/dynamic-form/src/app/app.component.ts
+++ b/adev/src/content/examples/dynamic-form/src/app/app.component.ts
@@ -13,7 +13,7 @@ import {Observable} from 'rxjs';
   template: `
     <div>
       <h2>Job Application for Heroes</h2>
-      <app-dynamic-form [questions]="questions$ | async"></app-dynamic-form>
+      <app-dynamic-form [questions]="questions$ | async" />
     </div>
   `,
   providers: [QuestionService],
diff --git a/adev/src/content/examples/dynamic-form/src/app/dynamic-form.component.html b/adev/src/content/examples/dynamic-form/src/app/dynamic-form.component.html
index b17fc4eb625..d5121c2cd23 100644
--- a/adev/src/content/examples/dynamic-form/src/app/dynamic-form.component.html
+++ b/adev/src/content/examples/dynamic-form/src/app/dynamic-form.component.html
@@ -3,7 +3,7 @@
   <form (ngSubmit)="onSubmit()" [formGroup]="form">
     @for (question of questions(); track question) {
       <div class="form-row">
-        <app-question [question]="question" [form]="form"></app-question>
+        <app-question [question]="question" [form]="form" />
       </div>
     }
 
diff --git a/adev/src/content/examples/dynamic-form/src/app/dynamic-form.component.ts b/adev/src/content/examples/dynamic-form/src/app/dynamic-form.component.ts
index 83f06fdc401..af90014900b 100644
--- a/adev/src/content/examples/dynamic-form/src/app/dynamic-form.component.ts
+++ b/adev/src/content/examples/dynamic-form/src/app/dynamic-form.component.ts
@@ -1,6 +1,5 @@
 // #docregion
-import {Component, input, Input, OnInit} from '@angular/core';
-import {CommonModule} from '@angular/common';
+import {Component, inject, input} from '@angular/core';
 import {FormGroup, ReactiveFormsModule} from '@angular/forms';
 
 import {DynamicFormQuestionComponent} from './dynamic-form-question.component';
@@ -14,17 +13,13 @@ import {QuestionControlService} from './question-control.service';
   providers: [QuestionControlService],
   imports: [DynamicFormQuestionComponent, ReactiveFormsModule],
 })
-export class DynamicFormComponent implements OnInit {
+export class DynamicFormComponent {
+  qcs = inject(QuestionControlService);
+
   questions = input<QuestionBase<string>[] | null>([]);
-  form!: FormGroup;
+  form: FormGroup = this.qcs.toFormGroup(this.questions() as QuestionBase<string>[]);
   payLoad = '';
 
-  constructor(private qcs: QuestionControlService) {}
-
-  ngOnInit() {
-    this.form = this.qcs.toFormGroup(this.questions() as QuestionBase<string>[]);
-  }
-
   onSubmit() {
     this.payLoad = JSON.stringify(this.form.getRawValue());
   }
diff --git a/adev/src/content/examples/form-validation/src/app/app.component.ts b/adev/src/content/examples/form-validation/src/app/app.component.ts
index 848aa748d95..ec60c3caa01 100644
--- a/adev/src/content/examples/form-validation/src/app/app.component.ts
+++ b/adev/src/content/examples/form-validation/src/app/app.component.ts
@@ -1,9 +1,9 @@
 // #docregion
 import {Component} from '@angular/core';
 import {ActorFormReactiveComponent} from './reactive/actor-form-reactive.component';
-import {ActorFormComponent} from '../../../forms/src/app/actor-form/actor-form.component';
 import {ReactiveFormsModule} from '@angular/forms';
 import {FormsModule} from '@angular/forms';
+import {ActorFormTemplateComponent} from './template/actor-form-template.component';
 
 @Component({
   selector: 'app-root',
@@ -11,6 +11,11 @@ import {FormsModule} from '@angular/forms';
              <app-actor-form-template/>
              <hr>
              <app-actor-form-reactive/>`,
-  imports: [ActorFormComponent, ActorFormReactiveComponent, FormsModule, ReactiveFormsModule],
+  imports: [
+    ActorFormReactiveComponent,
+    FormsModule,
+    ReactiveFormsModule,
+    ActorFormTemplateComponent,
+  ],
 })
 export class AppComponent {}
diff --git a/adev/src/content/examples/form-validation/src/app/reactive/actor-form-reactive.component.html b/adev/src/content/examples/form-validation/src/app/reactive/actor-form-reactive.component.html
index abfdfece05f..4cac0fe4302 100644
--- a/adev/src/content/examples/form-validation/src/app/reactive/actor-form-reactive.component.html
+++ b/adev/src/content/examples/form-validation/src/app/reactive/actor-form-reactive.component.html
@@ -1,4 +1,4 @@
- <!-- #docregion -->
+<!-- #docregion -->
 <div class="container">
 
   <h2>Reactive Form</h2>
@@ -7,58 +7,59 @@
 
     <div [hidden]="formDir.submitted">
 
-      <div class="cross-validation" [class.cross-validation-error]="actorForm.hasError('unambiguousRole') && (actorForm.touched || actorForm.dirty)">
+      <div class="cross-validation"
+           [class.cross-validation-error]="actorForm.hasError('unambiguousRole') && (actorForm.touched || actorForm.dirty)">
         <div class="form-group">
 
           <label for="name">Name</label>
           <!-- #docregion name-with-error-msg -->
           <input type="text" id="name" class="form-control"
-                formControlName="name" required>
+                 formControlName="name" required>
 
-          @if(name.invalid && (name.dirty || name.touched)) {
+          @if (name.invalid && (name.dirty || name.touched)) {
             <div class="alert alert-danger">
-              @if(name.hasError('required')) {
+
+              @if (name.hasError('required')) {
                 <div>
                   Name is required.
                 </div>
               }
-              @if(name.hasError('minlength')) {
+              @if (name.hasError('minlength')) {
                 <div>
                   Name must be at least 4 characters long.
                 </div>
               }
-              @if(name.hasError('forbiddenName')) {
+              @if (name.hasError('forbiddenName')) {
                 <div>
                   Name cannot be Bob.
                 </div>
               }
             </div>
           }
-            </div>
-          </div>
           <!-- #enddocregion name-with-error-msg -->
         </div>
 
         <div class="form-group">
           <label for="role">Role</label>
           <input type="text" id="role" class="form-control"
-              formControlName="role">
+                 formControlName="role">
 
-          @if(role.pending) {
-            <div>
-              Validating...
+          @if (role.pending) {
+            <div>Validating...</div>
+          }
+          @if (role.invalid) {
+            <div class="alert alert-danger role-errors">
+              @if (role.hasError('uniqueRole')) {
+                <div>
+                  Role is already taken.
+                </div>
+              }
             </div>
           }
-          @if(role.invalid) {
-            <div class="alert role-errors">
-              @if(role.hasError('uniqueRole')) {
-              Role is already taken.
-            </div>
-          </div>
         </div>
 
         <!-- #docregion cross-validation-error-message -->
-        @if(actorForm.hasError('unambiguousRole') && (actorForm.touched || actorForm.dirty)) {
+        @if (actorForm.hasError('unambiguousRole') && (actorForm.touched || actorForm.dirty)) {
           <div class="cross-validation-error-message alert alert-danger">
             Name cannot match role or audiences will be confused.
           </div>
@@ -69,16 +70,16 @@
       <div class="form-group">
         <label for="skill">Skill</label>
         <select id="skill" class="form-control"
-            formControlName="skill" required>
-          @for(skill of skills; track $index) {
+                formControlName="skill" required>
+          @for (skill of skills; track $index) {
             <option [value]="skill">{{ skill }}</option>
           }
         </select>
 
-        @if(skill.invalid && skill.touched) {
+        @if (skill.invalid && skill.touched) {
           <div class="alert alert-danger">
-            @if(skill.hasError('required')) {
-              Skill is required.
+            @if (skill.hasError('required')) {
+              <div>Skill is required.</div>
             }
           </div>
         }
@@ -87,13 +88,15 @@
       <p>Complete the form to enable the Submit button.</p>
       <button type="submit"
               class="btn btn-default"
-              [disabled]="actorForm.invalid">Submit</button>
+              [disabled]="actorForm.invalid">Submit
+      </button>
       <button type="button" class="btn btn-default"
-             (click)="formDir.resetForm({})">Reset</button>
+              (click)="formDir.resetForm({})">Reset
+      </button>
     </div>
   </form>
 
-  @if(formDir.submitted) {
+  @if (formDir.submitted) {
     <div class="submitted-message">
       <p>You've submitted your actor, {{ actorForm.value.name }}!</p>
       <button type="button" (click)="formDir.resetForm({})">Add new actor</button>
diff --git a/adev/src/content/examples/form-validation/src/app/template/actor-form-template.component.html b/adev/src/content/examples/form-validation/src/app/template/actor-form-template.component.html
index 0196af76865..0ffcf994c99 100644
--- a/adev/src/content/examples/form-validation/src/app/template/actor-form-template.component.html
+++ b/adev/src/content/examples/form-validation/src/app/template/actor-form-template.component.html
@@ -1,48 +1,50 @@
- <!-- #docregion -->
+<!-- #docregion -->
 <div>
 
   <h2>Template-Driven Form</h2>
   <!-- #docregion cross-validation-register-validator -->
   <form #actorForm="ngForm" appUnambiguousRole>
-  <!-- #enddocregion cross-validation-register-validator -->
+    <!-- #enddocregion cross-validation-register-validator -->
     <div [hidden]="actorForm.submitted">
-      <div class="cross-validation" [class.cross-validation-error]="actorForm.hasError('unambiguousRole') && (actorForm.touched || actorForm.dirty)">
+      <div class="cross-validation"
+           [class.cross-validation-error]="actorForm.hasError('unambiguousRole') && (actorForm.touched || actorForm.dirty)">
         <div class="form-group">
           <label for="name">Name</label>
           <!-- #docregion name-with-error-msg -->
           <!-- #docregion name-input -->
           <input type="text" id="name" name="name" class="form-control"
-                required minlength="4" appForbiddenName="bob"
-                [(ngModel)]="actor.name" #name="ngModel">
+                 required minlength="4" appForbiddenName="bob"
+                 [(ngModel)]="actor.name" #name="ngModel">
           <!-- #enddocregion name-input -->
 
-          @if(name.invalid && (name.dirty || name.touched)) {
+          @if (name.invalid && (name.dirty || name.touched)) {
             <div class="alert">
-            @if(name.hasError('required')) {  
-              <div>
-                Name is required.
-              </div>
-            }
-            @if(name.hasError('minlength')) {
-              <div>
-                Name must be at least 4 characters long.
-              </div>
-            }
-            @if(name.hasError('forbiddenName')) {
-              <div>
-                Name cannot be Bob.
-              </div>
-            }
 
-          </div>
+              @if (name.hasError('required')) {
+                <div>
+                  Name is required.
+                </div>
+              }
+              @if (name.hasError('minlength')) {
+                <div>
+                  Name must be at least 4 characters long.
+                </div>
+              }
+              @if (name.hasError('forbiddenName')) {
+                <div>
+                  Name cannot be Bob.
+                </div>
+              }
+
+            </div>
+          }
           <!-- #enddocregion name-with-error-msg -->
         </div>
-        }
 
         <div class="form-group">
           <label for="role">Role</label>
-        <!-- #docregion role-input -->
-        <input type="text"
+          <!-- #docregion role-input -->
+          <input type="text"
                  id="role"
                  name="role"
                  #role="ngModel"
@@ -50,22 +52,22 @@
                  [ngModelOptions]="{ updateOn: 'blur' }"
                  appUniqueRole>
           <!-- #enddocregion role-input -->
-          @if(role.pending) {
-            <div>
-              Validating...
+          @if (role.pending) {
+            <div>Validating...</div>
+          }
+          @if (role.invalid) {
+            <div class="alert role-errors">
+              @if (role.hasError('uniqueRole')) {
+                <div>
+                  Role is already taken.
+                </div>
+              }
             </div>
           }
-          @if(role.invalid) {
-            <div class="alert role-errors">
-              @if(role.hasError('uniqueRole')) {
-                Role is already taken.
-              </div>
-            }
-          </div>
         </div>
 
         <!-- #docregion cross-validation-error-message -->
-        @if(actorForm.hasError('unambiguousRole') && (actorForm.touched || actorForm.dirty)) {
+        @if (actorForm.hasError('unambiguousRole') && (actorForm.touched || actorForm.dirty)) {
           <div class="cross-validation-error-message alert">
             Name cannot match role.
           </div>
@@ -79,15 +81,15 @@
                 name="skill"
                 required [(ngModel)]="actor.skill"
                 #skill="ngModel">
-          @for(skill of skills; track $index) {
+          @for (skill of skills; track $index) {
             <option [value]="skill">{{ skill }}</option>
           }
         </select>
 
-        @if(skill.errors && skill.touched) {
+        @if (skill.errors && skill.touched) {
           <div class="alert">
-            @if(skill.errors['required']) {
-              Power is required.
+            @if (skill.errors['required']) {
+              <div>Skill is required.</div>
             }
           </div>
         }
@@ -95,12 +97,14 @@
 
       <p>Complete the form to enable the Submit button.</p>
       <button type="submit"
-              [disabled]="actorForm.invalid">Submit</button>
+              [disabled]="actorForm.invalid">Submit
+      </button>
       <button type="button"
-              (click)="actorForm.resetForm({})">Reset</button>
+              (click)="actorForm.resetForm({})">Reset
+      </button>
     </div>
 
-    @if(actorForm.submitted) {
+    @if (actorForm.submitted) {
       <div class="submitted-message">
         <p>You've submitted your actor, {{ actorForm.value.name }}!</p>
         <button type="button" (click)="actorForm.resetForm({})">Add new actor</button>
diff --git a/adev/src/content/examples/form-validation/src/app/template/actor-form-template.component.ts b/adev/src/content/examples/form-validation/src/app/template/actor-form-template.component.ts
index 6171e67ee06..7738f3e6e0c 100644
--- a/adev/src/content/examples/form-validation/src/app/template/actor-form-template.component.ts
+++ b/adev/src/content/examples/form-validation/src/app/template/actor-form-template.component.ts
@@ -2,12 +2,18 @@ import {Component} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {UnambiguousRoleValidatorDirective} from '../shared/unambiguous-role.directive';
 import {ForbiddenValidatorDirective} from '../shared/forbidden-name.directive';
+import {UniqueRoleValidatorDirective} from '../shared/role.directive';
 
 @Component({
   selector: 'app-actor-form-template',
   templateUrl: './actor-form-template.component.html',
   styleUrls: ['./actor-form-template.component.css'],
-  imports: [UnambiguousRoleValidatorDirective, FormsModule, ForbiddenValidatorDirective],
+  imports: [
+    UnambiguousRoleValidatorDirective,
+    FormsModule,
+    ForbiddenValidatorDirective,
+    UniqueRoleValidatorDirective,
+  ],
 })
 export class ActorFormTemplateComponent {
   skills = ['Method Acting', 'Singing', 'Dancing', 'Swordfighting'];
diff --git a/adev/src/content/examples/forms-overview/src/app/app.component.html b/adev/src/content/examples/forms-overview/src/app/app.component.html
index a274b28459c..ca482d3564e 100644
--- a/adev/src/content/examples/forms-overview/src/app/app.component.html
+++ b/adev/src/content/examples/forms-overview/src/app/app.component.html
@@ -3,8 +3,8 @@
 
 <h2>Reactive</h2>
 
-<app-reactive-favorite-color></app-reactive-favorite-color>
+<app-reactive-favorite-color />
 
 <h2>Template-Driven</h2>
 
-<app-template-favorite-color></app-template-favorite-color>
\ No newline at end of file
+<app-template-favorite-color />
diff --git a/adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html b/adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html
index c332caaa47a..6eea779b5a1 100644
--- a/adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html
+++ b/adev/src/content/examples/forms/src/app/actor-form/actor-form.component.html
@@ -33,7 +33,9 @@
         <select class="form-control" id="skill"
                 required [(ngModel)]="model.skill" name="skill"
                 #skill="ngModel">
-          <option *ngFor="let skill of skills" [value]="skill">{{ skill }}</option>
+          @for (skill of skills; track $index) {
+            <option [value]="skill">{{ skill }}</option>
+          }
         </select>
         <div [hidden]="skill.valid || skill.pristine" class="alert alert-danger">
           skill is required
@@ -132,7 +134,9 @@
         <div class="form-group">
           <label for="skill">Skill</label>
           <select class="form-control" id="skill" required>
-            <option *ngFor="let skill of skills" [value]="skill">{{ skill }}</option>
+            @for(skill of skills; track $index) {
+              <option [value]="skill">{{ skill }}</option>
+            }
           </select>
         </div>
         <!-- #enddocregion skills -->
@@ -168,7 +172,9 @@
           <select class="form-control"  id="skill"
                   required
                   [(ngModel)]="model.skill" name="skill">
-            <option *ngFor="let skill of skills" [value]="skill">{{ skill }}</option>
+            @for (skill of skills; track $index) {
+              <option [value]="skill">{{ skill }}</option>
+            }
           </select>
         </div>
 
diff --git a/adev/src/content/examples/forms/src/app/actor-form/actor-form.component.ts b/adev/src/content/examples/forms/src/app/actor-form/actor-form.component.ts
index 45fd88380f4..c66738819bc 100644
--- a/adev/src/content/examples/forms/src/app/actor-form/actor-form.component.ts
+++ b/adev/src/content/examples/forms/src/app/actor-form/actor-form.component.ts
@@ -4,12 +4,13 @@ import {Component} from '@angular/core';
 
 import {Actor} from '../actor';
 import {FormsModule} from '@angular/forms';
+import {JsonPipe} from '@angular/common';
 
 // #docregion imports
 @Component({
   selector: 'app-actor-form',
   templateUrl: './actor-form.component.html',
-  imports: [FormsModule],
+  imports: [FormsModule, JsonPipe],
 })
 export class ActorFormComponent {
   // #enddocregion imports
diff --git a/adev/src/content/examples/forms/src/app/app.component.html b/adev/src/content/examples/forms/src/app/app.component.html
index d51bf2f406e..2382d9e1f17 100644
--- a/adev/src/content/examples/forms/src/app/app.component.html
+++ b/adev/src/content/examples/forms/src/app/app.component.html
@@ -1 +1 @@
-<app-actor-form></app-actor-form>
\ No newline at end of file
+<app-actor-form />
diff --git a/adev/src/content/examples/reactive-forms/src/app/app.component.1.html b/adev/src/content/examples/reactive-forms/src/app/app.component.1.html
index 57ca7e22fbe..4a4410085e1 100644
--- a/adev/src/content/examples/reactive-forms/src/app/app.component.1.html
+++ b/adev/src/content/examples/reactive-forms/src/app/app.component.1.html
@@ -2,9 +2,9 @@
 <h1>Reactive Forms</h1>
 
 <!-- #docregion app-name-editor-->
-<app-name-editor></app-name-editor>
+<app-name-editor />
 <!-- #enddocregion app-name-editor-->
 
 <!-- #docregion app-profile-editor -->
-<app-profile-editor></app-profile-editor>
-<!-- #enddocregion app-profile-editor -->
\ No newline at end of file
+<app-profile-editor />
+<!-- #enddocregion app-profile-editor -->
diff --git a/adev/src/content/examples/reactive-forms/src/app/app.component.html b/adev/src/content/examples/reactive-forms/src/app/app.component.html
index 285c0c641d8..7aabd75adec 100644
--- a/adev/src/content/examples/reactive-forms/src/app/app.component.html
+++ b/adev/src/content/examples/reactive-forms/src/app/app.component.html
@@ -5,10 +5,10 @@
   <button type="button" (click)="toggleEditor('profile')">Profile Editor</button>
 </nav>
 
-@if (showNameEditor) {
-  <app-name-editor></app-name-editor>
+@if (showNameEditor()) {
+  <app-name-editor />
 }
 
-@if (showProfileEditor) {
-  <app-profile-editor></app-profile-editor>
+@if (showProfileEditor()) {
+  <app-profile-editor />
 }
diff --git a/adev/src/content/examples/reactive-forms/src/app/app.component.ts b/adev/src/content/examples/reactive-forms/src/app/app.component.ts
index 64fd7d57f4d..1aee8ce5318 100644
--- a/adev/src/content/examples/reactive-forms/src/app/app.component.ts
+++ b/adev/src/content/examples/reactive-forms/src/app/app.component.ts
@@ -1,4 +1,6 @@
-import {Component} from '@angular/core';
+import {Component, computed, signal, WritableSignal} from '@angular/core';
+import {NameEditorComponent} from './name-editor/name-editor.component';
+import {ProfileEditorComponent} from './profile-editor/profile-editor.component';
 
 export type EditorType = 'name' | 'profile';
 
@@ -6,19 +8,15 @@ export type EditorType = 'name' | 'profile';
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
+  imports: [NameEditorComponent, ProfileEditorComponent],
 })
 export class AppComponent {
-  editor: EditorType = 'name';
+  editor: WritableSignal<EditorType> = signal('name');
 
-  get showNameEditor() {
-    return this.editor === 'name';
-  }
-
-  get showProfileEditor() {
-    return this.editor === 'profile';
-  }
+  showNameEditor = computed(() => this.editor() === 'name');
+  showProfileEditor = computed(() => this.editor() === 'profile');
 
   toggleEditor(type: EditorType) {
-    this.editor = type;
+    this.editor.set(type);
   }
 }
diff --git a/adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.html b/adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.html
index 28d678f2631..cc00ded4317 100644
--- a/adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.html
+++ b/adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.html
@@ -30,7 +30,7 @@
     <h2>Aliases</h2>
     <button type="button" (click)="addAlias()">+ Add another alias</button>
 
-    @for(alias of aliases.controls; track alias.value; let i = $index) {
+    @for(alias of aliases.controls; track $index; let i = $index) {
     <div>
       <!-- The repeated alias template -->
       <label for="alias-{{ i }}">Alias: </label>
diff --git a/adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.html b/adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.html
index 87f509ff9da..bc37bc68214 100644
--- a/adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.html
+++ b/adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.html
@@ -29,7 +29,7 @@
     <h2>Aliases</h2>
     <button type="button" (click)="addAlias()">+ Add another alias</button>
 
-    @for (alias of aliases.controls; track alias.value; let i = $index) {
+    @for (alias of aliases.controls; track $index; let i = $index) {
       <div>
         <!-- The repeated alias template -->
         <label for="alias-{{ i }}">Alias:</label>
@@ -45,7 +45,7 @@
   <!-- #enddocregion submit-button -->
 </form>
 
-<hr />
+<hr>
 
 <p>Form Value: {{ profileForm.value | json }}</p>
 
diff --git a/adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts b/adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts
index fd68a0e4332..f29642fbb07 100644
--- a/adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts
+++ b/adev/src/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.ts
@@ -5,12 +5,13 @@ import {FormBuilder, ReactiveFormsModule} from '@angular/forms';
 import {Validators} from '@angular/forms';
 // #enddocregion validator-imports
 import {FormArray} from '@angular/forms';
+import {JsonPipe} from '@angular/common';
 
 @Component({
   selector: 'app-profile-editor',
   templateUrl: './profile-editor.component.html',
   styleUrls: ['./profile-editor.component.css'],
-  imports: [ReactiveFormsModule],
+  imports: [ReactiveFormsModule, JsonPipe],
 })
 export class ProfileEditorComponent {
   private formBuilder = inject(FormBuilder);
diff --git a/adev/src/content/examples/structural-directives/src/app/app.component.html b/adev/src/content/examples/structural-directives/src/app/app.component.html
index 81380c34220..e02ce08a9af 100644
--- a/adev/src/content/examples/structural-directives/src/app/app.component.html
+++ b/adev/src/content/examples/structural-directives/src/app/app.component.html
@@ -210,12 +210,12 @@
   </p>
 </ng-template>
 
-<hr />
+<hr>
 
 <h2 id="appIfLoaded">IfLoadedDirective</h2>
 <app-hero></app-hero>
 
-<hr />
+<hr>
 
 <h2 id="appTrigonometry">TrigonometryDirective</h2>
 
diff --git a/adev/src/content/examples/testing/src/app/demo/demo.ts b/adev/src/content/examples/testing/src/app/demo/demo.ts
index 39f0cb6281e..d930d1ce1f4 100755
--- a/adev/src/content/examples/testing/src/app/demo/demo.ts
+++ b/adev/src/content/examples/testing/src/app/demo/demo.ts
@@ -420,25 +420,25 @@ export class ShellComponent {}
   template: `
     <h1>Specs Demo</h1>
     <my-if-parent-comp></my-if-parent-comp>
-    <hr />
+    <hr>
     <h3>Input/Output Component</h3>
     <io-parent-comp></io-parent-comp>
-    <hr />
+    <hr>
     <h3>External Template Component</h3>
     <external-template-comp></external-template-comp>
-    <hr />
+    <hr>
     <h3>Component With External Template Component</h3>
     <comp-w-ext-comp></comp-w-ext-comp>
-    <hr />
+    <hr>
     <h3>Reverse Pipe</h3>
     <reverse-pipe-comp></reverse-pipe-comp>
-    <hr />
+    <hr>
     <h3>InputValueBinder Directive</h3>
     <input-value-comp></input-value-comp>
-    <hr />
+    <hr>
     <h3>Button Component</h3>
     <lightswitch-comp></lightswitch-comp>
-    <hr />
+    <hr>
     <h3>Needs Content</h3>
     <needs-content #nc>
       <child-1 #content text="My"></child-1>