docs: migrate selectors to self-closing tags to align with Angular style

docs/scenes/src/app/app.component.ts

@@ -11,7 +11,7 @@ import {RouterOutlet} from '@angular/router';
 
 @Component({
   selector: 'app-root',
-  template: '<router-outlet></router-outlet>',
+  template: '<router-outlet />',
   styleUrls: ['./app.component.scss'],
   imports: [RouterOutlet],
 })

docs/scenes/src/app/scene-viewer/scene-viewer.html

@@ -1,3 +1,3 @@
 <div id="scene-content-container">
-  <ng-template #scene></ng-template>
+  <ng-template #scene />
 </div>

docs/scenes/src/app/scenes/datepicker/datepicker-scene.html

@@ -1,8 +1,6 @@
 <div class="docs-calendar-wrapper">
-  <mat-calendar
-    class="docs-calendar"
+  <mat-calendar class="docs-calendar"
     [minDate]="minDate"
     [maxDate]="maxDate"
-    [selected]="selectedDate">
-  </mat-calendar>
+    [selected]="selectedDate" />
 </div>

docs/scenes/src/app/scenes/divider/divider-scene.html

@@ -3,12 +3,12 @@
     <mat-icon matListItemIcon>account_circle</mat-icon>
     <div matListItemTitle>Contact 1</div>
   </mat-list-item>
-  <mat-divider></mat-divider>
+  <mat-divider />
   <mat-list-item>
     <mat-icon matListItemIcon>account_circle</mat-icon>
     <div matListItemTitle>Contact 2</div>
   </mat-list-item>
-  <mat-divider></mat-divider>
+  <mat-divider />
   <mat-list-item>
     <mat-icon matListItemIcon>account_circle</mat-icon>
     <div matListItemTitle>Contact 3</div>

docs/scenes/src/app/scenes/paginator/paginator-scene.html

@@ -1,5 +1,4 @@
 <mat-paginator [length]="100"
                [pageSize]="10"
-               [pageSizeOptions]="[5, 10, 25, 100]" class="scene-paginator">
-</mat-paginator>
+               [pageSizeOptions]="[5, 10, 25, 100]" class="scene-paginator" />
 

docs/scenes/src/app/scenes/progress-bar/progress-bar-scene.html

@@ -1,5 +1,5 @@
-<mat-progress-bar mode="determinate" value="40" class="scene-progress-bar"></mat-progress-bar>
-<mat-progress-bar mode="indeterminate" class="scene-progress-bar"></mat-progress-bar>
-<mat-progress-bar mode="buffer" class="scene-progress-bar"></mat-progress-bar>
-<mat-progress-bar mode="query" class="scene-progress-bar"></mat-progress-bar>
+<mat-progress-bar mode="determinate" value="40" class="scene-progress-bar" />
+<mat-progress-bar mode="indeterminate" class="scene-progress-bar" />
+<mat-progress-bar mode="buffer" class="scene-progress-bar" />
+<mat-progress-bar mode="query" class="scene-progress-bar" />
 

docs/scenes/src/app/scenes/progress-spinner/progress-spinner-scene.html

@@ -1,14 +1,14 @@
 <div class="scene-spinner-container">
   <div class="scene-spinner scene-spinner-left">
     <div class="scene-spinner-label"></div>
-    <mat-progress-spinner mode="determinate" value=50></mat-progress-spinner>
+    <mat-progress-spinner mode="determinate" value=50 />
   </div>
   <div class="scene-spinner">
     <div class="scene-spinner-label"></div>
-    <mat-progress-spinner mode="determinate" value=50></mat-progress-spinner>
+    <mat-progress-spinner mode="determinate" value=50 />
   </div>
   <div class="scene-spinner scene-spinner-right">
     <div class="scene-spinner-label"></div>
-    <mat-progress-spinner mode="determinate" value=50></mat-progress-spinner>
+    <mat-progress-spinner mode="determinate" value=50 />
   </div>
 </div>

docs/scenes/src/app/scenes/tabs/tabs-scene.html

@@ -2,6 +2,6 @@
   <mat-tab label="Overview">
     <div class="docs-scene-tab-content"></div>
   </mat-tab>
-  <mat-tab label="API">  </mat-tab>
-  <mat-tab label="Examples">  </mat-tab>
+  <mat-tab label="API" />
+  <mat-tab label="Examples" />
 </mat-tab-group>

docs/src/app/pages/component-sidenav/component-sidenav.html

@@ -10,16 +10,16 @@
     </mat-sidenav>
   }
   <div class="docs-component-sidenav-content">
-    <component-page-header (toggleSidenav)="toggleSidenav()"></component-page-header>
+    <component-page-header (toggleSidenav)="toggleSidenav()" />
     <div class="docs-component-sidenav-inner-content">
       <main class="docs-component-sidenav-body-content">
         <!-- If on large screen, menu resides to left of content -->
         @if ((isScreenSmall | async) === false) {
           <app-component-nav/>
         }
-        <router-outlet></router-outlet>
+        <router-outlet />
       </main>
-      <app-footer class="docs-component-viewer-footer"></app-footer>
+      <app-footer class="docs-component-viewer-footer" />
     </div>
   </div>
 </mat-sidenav-container>

docs/src/app/pages/component-viewer/component-api.html

@@ -11,8 +11,7 @@
   <div class="docs-component-api">
     <doc-viewer [document]="getApiDocumentUrl(docItem)"
       class="docs-component-view-text-content"
-      (contentRendered)="updateTableOfContents(docItem.name, $event)">
-    </doc-viewer>
+      (contentRendered)="updateTableOfContents(docItem.name, $event)" />
 
     @for (additionalApiDoc of docItem.additionalApiDocs; track additionalApiDoc) {
       <doc-viewer

docs/src/app/pages/component-viewer/component-overview.html

@@ -4,8 +4,7 @@ <h2 class="cdk-visually-hidden" tabindex="-1">
   </h2>
   <doc-viewer [document]="getOverviewDocumentUrl(docItem)"
       class="docs-component-view-text-content docs-component-overview"
-      (contentRendered)="updateTableOfContents('Overview Content', $event)">
-  </doc-viewer>
+      (contentRendered)="updateTableOfContents('Overview Content', $event)" />
 
   @if (showToc | async) {
     <table-of-contents #toc container=".mat-drawer-content"/>

docs/src/app/pages/component-viewer/component-viewer.html

@@ -13,6 +13,6 @@
   </nav>
 
   <mat-tab-nav-panel #panel class="docs-component-viewer-content">
-    <router-outlet></router-outlet>
+    <router-outlet />
   </mat-tab-nav-panel>
 </div>

docs/src/app/pages/guide-list/guide-list.html

@@ -15,4 +15,4 @@
   </div>
 </main>
 
-<app-footer></app-footer>
+<app-footer />

docs/src/app/pages/guide-viewer/guide-viewer.html

@@ -5,9 +5,9 @@
                 [document]="guide?.document"
                 focusOnNavigation
                 id="guide-content"
-                aria-label="Guide content"></doc-viewer>
-    <table-of-contents #toc container="guide-viewer"></table-of-contents>
+                aria-label="Guide content" />
+    <table-of-contents #toc container="guide-viewer" />
   </div>
 </div>
 
-<app-footer></app-footer>
+<app-footer />

docs/src/app/pages/homepage/homepage.html

@@ -41,7 +41,7 @@ <h2>Frictionless</h2>
     </div>
   </div>
 
-  <mat-divider></mat-divider>
+  <mat-divider />
 
   <div class="docs-homepage-featured-components docs-homepage-carousel-row">
     <div class="docs-homepage-header">
@@ -65,7 +65,7 @@ <h2>Featured components</h2>
     </app-carousel>
   </div>
 
-  <mat-divider></mat-divider>
+  <mat-divider />
 
   <div class="docs-homepage-guides docs-homepage-carousel-row">
     <div class="docs-homepage-header">
@@ -92,5 +92,5 @@ <h2>Guides</h2>
 
 </main>
 
-<app-support></app-support>
-<app-footer></app-footer>
+<app-support />
+<app-footer />

docs/src/app/pages/not-found/not-found.html

@@ -10,4 +10,4 @@ <h1>Page Not Found</h1>
   </div>
 </main>
 
-<app-footer></app-footer>
+<app-footer />

docs/src/app/pages/system-variables/system-variables.html

@@ -130,7 +130,7 @@ <h2 id="colors">Colors</h2>
 
   <h2>Alternative Theme Colors</h2>
 
-  <theme-demo-colors [colors]="alternativeThemeColors"></theme-demo-colors>
+  <theme-demo-colors [colors]="alternativeThemeColors" />
 
   <h2>Surface Colors</h2>
 
@@ -145,7 +145,7 @@ <h2>Surface Colors</h2>
     and icons placed within.
   </p>
 
-  <theme-demo-colors [colors]="surfaceColors"></theme-demo-colors>
+  <theme-demo-colors [colors]="surfaceColors" />
 
   <h2>Fixed Colors</h2>
 
@@ -154,7 +154,7 @@ <h2>Fixed Colors</h2>
     by any Angular Material components.
   </p>
 
-  <theme-demo-colors [colors]="fixedColors"></theme-demo-colors>
+  <theme-demo-colors [colors]="fixedColors" />
 
 </mat-expansion-panel>
 

docs/src/app/shared/carousel/carousel.html

@@ -8,7 +8,7 @@
 <div #contentWrapper (keyup)="onKeydown($event)"
      class="docs-carousel-content-wrapper" role="region">
   <div class="docs-carousel-content" role="list" tabindex="0" #list>
-    <ng-content></ng-content>
+    <ng-content />
   </div>
 </div>
 

docs/src/app/shared/doc-viewer/doc-viewer.spec.ts

@@ -215,7 +215,7 @@ describe('DocViewer', () => {
 
 @Component({
   selector: 'test',
-  template: `<doc-viewer [document]="documentUrl"></doc-viewer>`,
+  template: `<doc-viewer [document]="documentUrl" />`,
   imports: [DocViewer],
 })
 class DocViewerTestComponent {
@@ -270,7 +270,7 @@ class TestComponent {}
 
 @Component({
   selector: 'test',
-  template: `<doc-viewer [document]="component"></doc-viewer>`,
+  template: `<doc-viewer [document]="component" />`,
   imports: [DocViewer, TestComponent],
 })
 class DocViewerWithCompTestComponent {

docs/src/app/shared/doc-viewer/doc-viewer.ts

@@ -59,7 +59,7 @@ class DocFetcher {
   selector: 'doc-viewer',
   template: `
     @if (portal) {
-      <ng-template [cdkPortalOutlet]="portal"></ng-template>
+      <ng-template [cdkPortalOutlet]="portal" />
     } @else {
       Loading document...
     }

docs/src/app/shared/example-viewer/code-snippet.html

@@ -1,3 +1,3 @@
 <div class="docs-example-source-wrapper">
-  <pre class="docs-example-source"><doc-viewer #viewer [document]="source()"></doc-viewer></pre>
+  <pre class="docs-example-source"><doc-viewer #viewer [document]="source()" /></pre>
 </div>

docs/src/app/shared/example-viewer/example-viewer.html

@@ -59,7 +59,7 @@
         <mat-icon>code</mat-icon>
       </button>
 
-      <stackblitz-button [example]="example"></stackblitz-button>
+      <stackblitz-button [example]="example" />
     </div>
 
     @if (view() === 'full') {
@@ -74,7 +74,7 @@
                   <mat-icon>content_copy</mat-icon>
                 </button>
               </div>
-              <code-snippet [source]="exampleTabs()[tabName]"></code-snippet>
+              <code-snippet [source]="exampleTabs()[tabName]" />
             </mat-tab>
           }
         </mat-tab-group>