docs: use self-closing tag

Aligns template syntax with modern Angular recommendations and improves readability.

(cherry picked from commit 12afc1d164)

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 -->

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],

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],

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],

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],

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],

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 { }
 ```