From 8b4c213cd3627c2fcd5feba0b7891c0d3bc74da4 Mon Sep 17 00:00:00 2001
From: Shuaib Hasan Akib <akibh805@gmail.com>
Date: Fri, 6 Feb 2026 08:13:15 +0600
Subject: [PATCH] docs: use self-closing tag

Aligns template syntax with modern Angular recommendations and improves readability.

(cherry picked from commit 12afc1d164ecda2b25b5a2c0be0c69b8373b16bd)
---
 .../content/examples/accessibility/src/app/app.component.html  | 3 +--
 .../content/examples/animations/src/app/hero-list-auto-page.ts | 2 +-
 .../examples/animations/src/app/hero-list-group-page.ts        | 2 +-
 .../src/content/examples/animations/src/app/open-close-page.ts | 2 +-
 .../content/examples/animations/src/app/status-slider-page.ts  | 2 +-
 .../examples/animations/src/app/toggle-animations-page.ts      | 2 +-
 adev/src/content/guide/components/advanced-configuration.md    | 2 +-
 7 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/adev/src/content/examples/accessibility/src/app/app.component.html b/adev/src/content/examples/accessibility/src/app/app.component.html
index f1994152263..ae72779c1ec 100755
--- a/adev/src/content/examples/accessibility/src/app/app.component.html
+++ b/adev/src/content/examples/accessibility/src/app/app.component.html
@@ -13,6 +13,5 @@
 </label>
 
 <!-- The user of the progressbar sets an aria-label to communicate what the progress means. -->
-<app-example-progressbar [value]="progress" aria-label="Example of a progress bar">
-</app-example-progressbar>
+<app-example-progressbar [value]="progress" aria-label="Example of a progress bar" />
 <!-- #enddocregion template -->
diff --git a/adev/src/content/examples/animations/src/app/hero-list-auto-page.ts b/adev/src/content/examples/animations/src/app/hero-list-auto-page.ts
index ba6e819d97d..b842a323f25 100755
--- a/adev/src/content/examples/animations/src/app/hero-list-auto-page.ts
+++ b/adev/src/content/examples/animations/src/app/hero-list-auto-page.ts
@@ -8,7 +8,7 @@ import {HeroListAuto} from './hero-list-auto';
     <section>
       <h2>Automatic Calculation</h2>
 
-      <app-hero-list-auto [heroes]="heroes" (remove)="onRemove($event)"></app-hero-list-auto>
+      <app-hero-list-auto [heroes]="heroes" (remove)="onRemove($event)" />
     </section>
   `,
   imports: [HeroListAuto],
diff --git a/adev/src/content/examples/animations/src/app/hero-list-group-page.ts b/adev/src/content/examples/animations/src/app/hero-list-group-page.ts
index 8ab757ad2a5..e628e8ad489 100755
--- a/adev/src/content/examples/animations/src/app/hero-list-group-page.ts
+++ b/adev/src/content/examples/animations/src/app/hero-list-group-page.ts
@@ -8,7 +8,7 @@ import {HeroListGroups} from './hero-list-groups';
     <section>
       <h2>Hero List Group</h2>
 
-      <app-hero-list-groups [heroes]="heroes" (remove)="onRemove($event)"></app-hero-list-groups>
+      <app-hero-list-groups [heroes]="heroes" (remove)="onRemove($event)" />
     </section>
   `,
   imports: [HeroListGroups],
diff --git a/adev/src/content/examples/animations/src/app/open-close-page.ts b/adev/src/content/examples/animations/src/app/open-close-page.ts
index bcac44e38fe..f25f76104f7 100755
--- a/adev/src/content/examples/animations/src/app/open-close-page.ts
+++ b/adev/src/content/examples/animations/src/app/open-close-page.ts
@@ -9,7 +9,7 @@ import {OpenClose} from './open-close';
       <input type="checkbox" id="log-checkbox" [checked]="logging" (click)="toggleLogging()" />
       <label for="log-checkbox">Console Log Animation Events</label>
 
-      <app-open-close [logging]="logging"></app-open-close>
+      <app-open-close [logging]="logging" />
     </section>
   `,
   imports: [OpenClose],
diff --git a/adev/src/content/examples/animations/src/app/status-slider-page.ts b/adev/src/content/examples/animations/src/app/status-slider-page.ts
index f58f3572336..d315e0fbfe3 100755
--- a/adev/src/content/examples/animations/src/app/status-slider-page.ts
+++ b/adev/src/content/examples/animations/src/app/status-slider-page.ts
@@ -6,7 +6,7 @@ import {StatusSlider} from './status-slider';
   template: `
     <section>
       <h2>Status Slider</h2>
-      <app-status-slider></app-status-slider>
+      <app-status-slider />
     </section>
   `,
   imports: [StatusSlider],
diff --git a/adev/src/content/examples/animations/src/app/toggle-animations-page.ts b/adev/src/content/examples/animations/src/app/toggle-animations-page.ts
index c8f0930c6a0..7ae251aa11f 100755
--- a/adev/src/content/examples/animations/src/app/toggle-animations-page.ts
+++ b/adev/src/content/examples/animations/src/app/toggle-animations-page.ts
@@ -7,7 +7,7 @@ import {OpenCloseChild} from './open-close.4';
     <section>
       <h2>Toggle Animations</h2>
 
-      <app-open-close-toggle></app-open-close-toggle>
+      <app-open-close-toggle />
     </section>
   `,
   imports: [OpenCloseChild],
diff --git a/adev/src/content/guide/components/advanced-configuration.md b/adev/src/content/guide/components/advanced-configuration.md
index 4e71034ee84..875e44ebab6 100644
--- a/adev/src/content/guide/components/advanced-configuration.md
+++ b/adev/src/content/guide/components/advanced-configuration.md
@@ -40,7 +40,7 @@ import {Component, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
 @Component({
   ...,
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: '<some-unknown-component></some-unknown-component>'
+  template: '<some-unknown-component />'
 })
 export class ComponentWithCustomElements { }
 ```