Task/refactor various components to self-closing tags (#5704)

* Refactor to self-closing tags

* Update changelog

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Changed
+
+- Refactored various components to use self-closing tags
+
 ## 2.207.0 - 2025-10-08
 
 ### Added

apps/client/src/app/app.component.html

@@ -43,7 +43,7 @@
 </header>
 
 <main role="main">
-  <router-outlet></router-outlet>
+  <router-outlet />
 </main>
 
 @if (showFooter) {

apps/client/src/app/components/admin-market-data/admin-market-data.html

@@ -64,8 +64,7 @@
                   [checked]="selection.isSelected(element)"
                   (change)="$event ? selection.toggle(element) : null"
                   (click)="$event.stopPropagation()"
-                >
-                </mat-checkbox>
+                />
               }
             </td>
           </ng-container>

apps/client/src/app/components/admin-market-data/create-asset-profile-dialog/create-asset-profile-dialog.html

@@ -14,11 +14,9 @@
       >
         <mat-radio-button name="auto" value="auto" />
         <label class="m-0" for="auto" i18n>Search</label>
-        <mat-radio-button class="ml-3" name="manual" value="manual">
-        </mat-radio-button>
+        <mat-radio-button class="ml-3" name="manual" value="manual" />
         <label class="m-0" for="manual" i18n>Add Manually</label>
-        <mat-radio-button class="ml-3" name="currency" value="currency">
-        </mat-radio-button>
+        <mat-radio-button class="ml-3" name="currency" value="currency" />
         <label class="m-0" for="currency" i18n>Add Currency</label>
       </mat-radio-group>
     </div>

apps/client/src/app/components/header/header.component.html

@@ -414,8 +414,8 @@
           class="d-none d-sm-block no-min-width p-1"
           href="https://github.com/ghostfolio/ghostfolio"
           mat-flat-button
-          ><ion-icon name="logo-github"></ion-icon
-        ></a>
+          ><ion-icon name="logo-github"
+        /></a>
       </li>
       <li class="list-inline-item">
         <button class="d-sm-block" mat-flat-button (click)="openLoginDialog()">

apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.html

@@ -438,8 +438,9 @@
                 }"
                 [routerLink]="routerLinkAdminControlMarketData"
                 (click)="onClose()"
-                ><ion-icon class="mr-1" name="create-outline"></ion-icon
-                ><span i18n>Manage Asset Profile</span>...</a
+                ><ion-icon class="mr-1" name="create-outline" /><span i18n
+                  >Manage Asset Profile</span
+                >...</a
               >
             }
             @if (
@@ -447,8 +448,9 @@
               data.hasPermissionToReportDataGlitch === true
             ) {
               <a color="warn" mat-stroked-button [href]="reportDataGlitchMail"
-                ><ion-icon class="mr-1" name="flag-outline"></ion-icon
-                ><span i18n>Report Data Glitch</span>...</a
+                ><ion-icon class="mr-1" name="flag-outline" /><span i18n
+                  >Report Data Glitch</span
+                >...</a
               >
             }
           </div>

apps/client/src/app/pages/about/about-page.html

@@ -1,5 +1,5 @@
 <mat-tab-nav-panel #tabPanel class="flex-grow-1 overflow-auto">
-  <router-outlet></router-outlet>
+  <router-outlet />
 </mat-tab-nav-panel>
 
 <nav

apps/client/src/app/pages/about/changelog/changelog-page.html

@@ -46,7 +46,7 @@
       }
 
       <div class="changelog">
-        <markdown [src]="'../assets/CHANGELOG.md'" (load)="onLoad()"></markdown>
+        <markdown [src]="'../assets/CHANGELOG.md'" (load)="onLoad()" />
       </div>
     </div>
   </div>

apps/client/src/app/pages/about/license/license-page.html

@@ -3,7 +3,7 @@
     <div class="col">
       <h1 class="d-none d-sm-block h3 mb-4 text-center" i18n>License</h1>
       <div>
-        <markdown [src]="'../assets/LICENSE'"></markdown>
+        <markdown [src]="'../assets/LICENSE'" />
       </div>
     </div>
   </div>

apps/client/src/app/pages/about/privacy-policy/privacy-policy-page.html

@@ -2,7 +2,7 @@
   <div class="mb-5 row">
     <div class="col">
       <h1 class="d-none d-sm-block h3 mb-4 text-center" i18n>Privacy Policy</h1>
-      <markdown [src]="'../assets/privacy-policy.md'"></markdown>
+      <markdown [src]="'../assets/privacy-policy.md'" />
     </div>
   </div>
 </div>

apps/client/src/app/pages/about/terms-of-service/terms-of-service-page.html

@@ -4,7 +4,7 @@
       <h1 class="d-none d-sm-block h3 mb-4 text-center" i18n>
         Terms of Service
       </h1>
-      <markdown [src]="'../assets/terms-of-service.md'"></markdown>
+      <markdown [src]="'../assets/terms-of-service.md'" />
     </div>
   </div>
 </div>

apps/client/src/app/pages/admin/admin-page.html

@@ -1,5 +1,5 @@
 <mat-tab-nav-panel #tabPanel class="flex-grow-1 overflow-auto">
-  <router-outlet></router-outlet>
+  <router-outlet />
 </mat-tab-nav-panel>
 
 <nav

apps/client/src/app/pages/faq/faq-page.html

@@ -1,5 +1,5 @@
 <mat-tab-nav-panel #tabPanel class="flex-grow-1 overflow-auto">
-  <router-outlet></router-outlet>
+  <router-outlet />
 </mat-tab-nav-panel>
 
 <nav

apps/client/src/app/pages/home/home-page.html

@@ -1,5 +1,5 @@
 <mat-tab-nav-panel #tabPanel class="flex-grow-1 overflow-auto">
-  <router-outlet></router-outlet>
+  <router-outlet />
 </mat-tab-nav-panel>
 
 <nav

apps/client/src/app/pages/portfolio/portfolio-page.html

@@ -1,5 +1,5 @@
 <mat-tab-nav-panel #tabPanel class="flex-grow-1 overflow-auto">
-  <router-outlet></router-outlet>
+  <router-outlet />
 </mat-tab-nav-panel>
 
 <nav

apps/client/src/app/pages/resources/resources-page.html

@@ -1,5 +1,5 @@
 <mat-tab-nav-panel #tabPanel class="flex-grow-1 overflow-auto">
-  <router-outlet></router-outlet>
+  <router-outlet />
 </mat-tab-nav-panel>
 
 <nav

apps/client/src/app/pages/user-account/user-account-page.html

@@ -1,5 +1,5 @@
 <mat-tab-nav-panel #tabPanel class="flex-grow-1 overflow-auto">
-  <router-outlet></router-outlet>
+  <router-outlet />
 </mat-tab-nav-panel>
 
 <nav

apps/client/src/app/pages/zen/zen-page.html

@@ -1,5 +1,5 @@
 <mat-tab-nav-panel #tabPanel class="flex-grow-1 overflow-auto">
-  <router-outlet></router-outlet>
+  <router-outlet />
 </mat-tab-nav-panel>
 
 <nav

libs/ui/src/lib/activities-table/activities-table.component.html

@@ -105,9 +105,7 @@
     </ng-container>
 
     <ng-container matColumnDef="importStatus">
-      <th *matHeaderCellDef class="px-1" mat-header-cell>
-        <ng-container i18n></ng-container>
-      </th>
+      <th *matHeaderCellDef class="px-1" mat-header-cell></th>
       <td *matCellDef="let element" class="px-1" mat-cell>
         @if (element.error) {
           <div

libs/ui/src/lib/carousel/carousel.component.html

@@ -13,7 +13,7 @@
 
 <div #contentWrapper class="overflow-hidden" role="region">
   <div #list class="d-flex carousel-content" role="list" tabindex="0">
-    <ng-content></ng-content>
+    <ng-content />
   </div>
 </div>
 

libs/ui/src/lib/fire-calculator/fire-calculator.component.html

@@ -52,8 +52,7 @@
             startView="multi-year"
             [disabled]="hasPermissionToUpdateUserSettings !== true"
             (monthSelected)="setMonthAndYear($event, datepicker)"
-          >
-          </mat-datepicker>
+          />
         </mat-form-field>
 
         <mat-form-field appearance="outline" class="w-100">

libs/ui/src/lib/value/value.component.html

@@ -4,7 +4,7 @@
   </div>
 }
 <div class="d-flex flex-column w-100">
-  <ng-template #label><ng-content></ng-content></ng-template>
+  <ng-template #label><ng-content /></ng-template>
   @if (value || value === 0 || value === null) {
     <div
       class="align-items-center d-flex"
@@ -87,16 +87,14 @@
 
   @if (size === 'large') {
     <div class="text-truncate">
-      <span class="h6"
-        ><ng-container *ngTemplateOutlet="label"></ng-container
-      ></span>
+      <span class="h6"><ng-container *ngTemplateOutlet="label" /></span>
       @if (subLabel) {
         <span class="text-muted"> {{ subLabel }}</span>
       }
     </div>
   } @else {
     <small class="d-block text-truncate">
-      <ng-container *ngTemplateOutlet="label"></ng-container>
+      <ng-container *ngTemplateOutlet="label" />
     </small>
   }
 </div>