docs(docs-infra): use self-closing syntax for component examples

Replaced multiple component tags such as `<example></example>` with
self-closing syntax (`<example />`) across documentation examples.
This improves readability and aligns with the current Angular
style conventions.

adev/src/content/examples/dependency-injection/src/app/app.component.1.ts

@@ -7,8 +7,8 @@ import {HeroesComponent} from './heroes/heroes.component';
   selector: 'app-root',
   template: `
     <h1>{{title}}</h1>
-    <app-car></app-car>
-    <app-heroes></app-heroes>
+    <app-car />
+    <app-heroes />
   `,
   imports: [CarComponent, HeroesComponent],
 })

adev/src/content/examples/dependency-injection/src/app/app.component.2.ts

@@ -8,8 +8,8 @@ import {HeroesComponent} from './heroes/heroes.component';
   selector: 'app-root',
   template: `
     <h1>{{title}}</h1>
-    <app-car></app-car>
-    <app-heroes></app-heroes>
+    <app-car />
+    <app-heroes />
   `,
   imports: [CarComponent, HeroesComponent],
 })

adev/src/content/examples/dependency-injection/src/app/heroes/heroes-tsp.component.ts

@@ -11,7 +11,7 @@ import {HeroListComponent} from './hero-list.component';
   selector: 'app-heroes-tsp',
   template: `
     <h2>Heroes</h2>
-    <app-hero-list></app-hero-list>
+    <app-hero-list />
   `,
   imports: [HeroListComponent],
 })

adev/src/content/examples/dependency-injection/src/app/heroes/heroes.component.1.ts

@@ -8,7 +8,7 @@ import {HeroListComponent} from './hero-list.component';
   providers: [HeroService],
   template: `
     <h2>Heroes</h2>
-    <app-hero-list></app-hero-list>
+    <app-hero-list />
   `,
   imports: [HeroListComponent],
 })

adev/src/content/examples/dependency-injection/src/app/heroes/heroes.component.ts

@@ -8,7 +8,7 @@ import {HeroListComponent} from './hero-list.component';
   providers: [heroServiceProvider],
   template: `
     <h2>Heroes</h2>
-    <app-hero-list></app-hero-list>
+    <app-hero-list />
   `,
   imports: [HeroListComponent],
 })

adev/src/content/examples/pipes/src/app/app.component.html

@@ -11,35 +11,35 @@
 
 <hr>
 <h2 id="date-pipe">Date Pipe</h2>
-<app-birthday></app-birthday>
+<app-birthday />
 
 <hr>
 <h2 id="date-pipe-formatting">Date Pipe Formatting</h2>
-<app-birthday-formatting></app-birthday-formatting>
+<app-birthday-formatting />
 
 <hr>
 <h2 id="pipe-chaining">Pipe Chaining</h2>
-<app-birthday-pipe-chaining></app-birthday-pipe-chaining>
+<app-birthday-pipe-chaining />
 
 <hr>
-<app-power-booster id="power-booster"></app-power-booster>
+<app-power-booster id="power-booster" />
 
 <h2 id="pipe-precedence">Pipes and Precedence</h2>
-<app-pipe-precedence></app-pipe-precedence>
+<app-pipe-precedence />
 
 <hr>
-<app-hero-async-message id="hero-async-message"></app-hero-async-message>
+<app-hero-async-message id="hero-async-message" />
 
 <hr>
 <h2 id="json-pipe">Json Pipe for Debugging</h2>
 <p>Use the JsonPipe to display component properties for debugging.</p>
 <code>data | json</code>
 <p>
-  <app-json-pipe></app-json-pipe>
+  <app-json-pipe />
 </p>
 
 <hr>
-<app-flying-heroes id="flying-heroes"></app-flying-heroes>
+<app-flying-heroes id="flying-heroes" />
 
 <hr>
-<app-flying-heroes-impure id="flying-heroes-impure"></app-flying-heroes-impure>
+<app-flying-heroes-impure id="flying-heroes-impure" />

adev/src/content/examples/resolution-modifiers/src/app/app.component.html

@@ -3,12 +3,12 @@
 <p>Basic flower service: {{ flower.emoji }}</p>
 <p>Basic leaf service: {{ leaf.emoji }}</p>
 
-<app-optional></app-optional>
+<app-optional />
 
-<app-self></app-self>
+<app-self />
 
-<app-self-no-data></app-self-no-data>
+<app-self-no-data />
 
-<app-skipself></app-skipself>
+<app-skipself />
 
-<app-host-parent></app-host-parent>
+<app-host-parent />

adev/src/content/examples/resolution-modifiers/src/app/host/host.component.html

@@ -2,5 +2,5 @@
 	<h2>&commat;Host() Component</h2>
 	<p>Flower emoji: {{ flower?.emoji }}</p>
 	<p><i>(&commat;Host() stops it here)</i></p>
-	<app-host-child></app-host-child>
+	<app-host-child />
 </div>

adev/src/content/examples/router-tutorial/src/app/app.component.html

@@ -19,14 +19,14 @@
 </nav>
 <!-- #enddocregion routeractivelink-->
 <!-- #docregion router-outlet -->
-<router-outlet></router-outlet>
+<router-outlet />
 <!-- #enddocregion router-outlet -->
 
 <div style="display: none;">
 <!-- This HTML represents the initial state for the tutorial. It is not intended to appear in the app. -->
 <!-- #docregion setup, components -->
-<app-crisis-list></app-crisis-list>
-<app-heroes-list></app-heroes-list>
+<app-crisis-list />
+<app-heroes-list />
 <!-- #enddocregion setup, components -->
 
 <!-- This HTML snippet is for when the user first adds the routerlink navigation. -->
@@ -38,4 +38,4 @@
 <!-- #enddocregion nav-->
 
 
-</div>
+</div>

adev/src/content/examples/router/src/app/app.component.1.html

@@ -4,4 +4,4 @@
   <a routerLink="/crisis-center" routerLinkActive="active" ariaCurrentWhenActive="page">Crisis Center</a>
   <a routerLink="/heroes" routerLinkActive="active" ariaCurrentWhenActive="page">Heroes</a>
 </nav>
-<router-outlet></router-outlet>
+<router-outlet />

adev/src/content/examples/routing-with-urlmatcher/src/app/app.component.html

@@ -2,4 +2,4 @@
 
 Navigate to <a routerLink="/@Angular">my profile</a>
 
-<router-outlet></router-outlet>
+<router-outlet />

adev/src/content/examples/security/src/app/app.component.ts

@@ -7,8 +7,8 @@ import {InnerHtmlBindingComponent} from './inner-html-binding.component';
   selector: 'app-root',
   template: `
     <h1>Security</h1>
-    <app-inner-html-binding></app-inner-html-binding>
-    <app-bypass-security></app-bypass-security>
+    <app-inner-html-binding />
+    <app-bypass-security />
   `,
   imports: [BypassSecurityComponent, InnerHtmlBindingComponent],
 })

adev/src/content/examples/testing/src/app/about/about.component.ts

@@ -8,7 +8,7 @@ import {TwainComponent} from '../twain/twain.component';
   template: `
     <h2 highlight="skyblue">About</h2>
     <h3>Quote of the day:</h3>
-    <twain-quote></twain-quote>
+    <twain-quote />
   `,
   imports: [TwainComponent, HighlightDirective],
 })

adev/src/content/examples/testing/src/app/app.component.html

@@ -1,6 +1,6 @@
 <!-- #docregion -->
-<app-banner></app-banner>
-<app-welcome></app-welcome>
+<app-banner />
+<app-welcome />
 <!-- #docregion links -->
 <nav>
   <a routerLink="/dashboard">Dashboard</a>
@@ -8,4 +8,4 @@
   <a routerLink="/about">About</a>
 </nav>
 <!-- #enddocregion links -->
-<router-outlet></router-outlet>
+<router-outlet />