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.

(cherry picked from commit a2cd367)

Author: MeAkib

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 @@ <h1 id="toc">Pipes</h1>
 
 <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 @@ <h1>DI resolution modifiers</h1>
 <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 @@ <h1>Angular Router Sample</h1>
 </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 @@ <h1>Angular Router Sample</h1>
 <!-- #enddocregion nav-->
 
 
-</div>
+</div>

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

@@ -4,4 +4,4 @@ <h1>Angular Router</h1>
   <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 />