From 7300a7ad3b2430c0c27447762ae613e54b012862 Mon Sep 17 00:00:00 2001
From: Char2sGu <char2s@outlook.com>
Date: Tue, 17 Sep 2024 12:39:06 -0400
Subject: [PATCH] refactor(client): migrate to self-closed tags in templates

---
 .../src/app/context/app-context.component.html   |  6 +++---
 ...acceleration-over-time-display.component.html |  3 +--
 .../graph-dialog/graph-dialog.component.html     |  2 +-
 .../half-gauge/half-gauge.component.html         |  2 +-
 .../src/components/hstack/hstack.component.html  |  2 +-
 .../info-background.component.html               |  8 ++++----
 .../info-graph/info-graph.component.html         |  2 +-
 .../loading-page/loading-page.component.html     |  2 +-
 .../pie-chart/pie-chart.component.html           |  2 +-
 .../raspberry-pi-desktop.component.html          |  6 +++---
 .../raspberry-pi-mobile.component.html           |  6 +++---
 .../raspberry-pi/raspberry-pi.component.html     |  4 ++--
 .../sidebar-chip/sidebar-chip.component.html     |  2 +-
 .../sidebar-toggle/sidebar-toggle.component.html |  2 +-
 .../speed-display/speed-display.component.html   |  2 +-
 .../speed-over-time-display.component.html       |  3 +--
 .../src/components/vstack/vstack.component.html  |  2 +-
 .../battery-info-display.html                    |  4 ++--
 .../cell-temp-display.component.html             |  2 +-
 .../cell-temp-graph.component.html               |  3 +--
 .../high-low-cell-display.component.html         |  2 +-
 .../high-low-cell-graph.component.html           |  3 +--
 .../pack-voltage-display.component.html          |  2 +-
 .../pack-voltage-graph.component.html            |  3 +--
 .../graph-caption/graph-caption.component.html   |  4 ++--
 .../run-selector/run-selector.component.html     |  2 +-
 .../graph-sidebar-desktop.component.html         |  2 +-
 .../landing-page-mobile.component.html           | 16 ++++++++--------
 .../landing-page/landing-page.component.html     |  4 ++--
 angular-client/src/pages/map/map.component.html  |  6 +++---
 30 files changed, 52 insertions(+), 57 deletions(-)

diff --git a/angular-client/src/app/context/app-context.component.html b/angular-client/src/app/context/app-context.component.html
index b13e1248..089c26c0 100644
--- a/angular-client/src/app/context/app-context.component.html
+++ b/angular-client/src/app/context/app-context.component.html
@@ -1,3 +1,3 @@
-<p-toast></p-toast>
-<app-sidebar></app-sidebar>
-<router-outlet></router-outlet>
+<p-toast />
+<app-sidebar />
+<router-outlet />
diff --git a/angular-client/src/components/acceleration-over-time-display/acceleration-over-time-display.component.html b/angular-client/src/components/acceleration-over-time-display/acceleration-over-time-display.component.html
index 153e91df..afaf32c4 100644
--- a/angular-client/src/components/acceleration-over-time-display/acceleration-over-time-display.component.html
+++ b/angular-client/src/components/acceleration-over-time-display/acceleration-over-time-display.component.html
@@ -4,5 +4,4 @@
   icon="speed"
   title="Acceleration Over Time"
   color="purple"
->
-</info-graph>
+/>
diff --git a/angular-client/src/components/graph-dialog/graph-dialog.component.html b/angular-client/src/components/graph-dialog/graph-dialog.component.html
index 7d47a412..28ee8054 100644
--- a/angular-client/src/components/graph-dialog/graph-dialog.component.html
+++ b/angular-client/src/components/graph-dialog/graph-dialog.component.html
@@ -5,5 +5,5 @@
     [data]="data"
     [title]="title"
     [color]="color"
-  ></graph-component>
+  />
 </div>
diff --git a/angular-client/src/components/half-gauge/half-gauge.component.html b/angular-client/src/components/half-gauge/half-gauge.component.html
index 15ec3c29..4fb6f9d5 100644
--- a/angular-client/src/components/half-gauge/half-gauge.component.html
+++ b/angular-client/src/components/half-gauge/half-gauge.component.html
@@ -7,5 +7,5 @@
     [plotOptions]="chartOptions.plotOptions"
     [labels]="chartOptions.labels"
     [fill]="chartOptions.fill"
-  ></apx-chart>
+  />
 </div>
diff --git a/angular-client/src/components/hstack/hstack.component.html b/angular-client/src/components/hstack/hstack.component.html
index 4b21ab7c..c2de18de 100644
--- a/angular-client/src/components/hstack/hstack.component.html
+++ b/angular-client/src/components/hstack/hstack.component.html
@@ -1,3 +1,3 @@
 <div fxLayout="row" [fxLayoutAlign]="alignment" [fxLayoutGap]="spacing" style="height: 100%">
-  <ng-content></ng-content>
+  <ng-content />
 </div>
diff --git a/angular-client/src/components/info-background/info-background.component.html b/angular-client/src/components/info-background/info-background.component.html
index 76814958..3ff7766f 100644
--- a/angular-client/src/components/info-background/info-background.component.html
+++ b/angular-client/src/components/info-background/info-background.component.html
@@ -1,12 +1,12 @@
 <div class="container" (click)="onClick()" [style]="{ 'background-color': backgroundColor }">
   <div *ngIf="title" class="title-container">
     <div class="title">
-      <mat-icon *ngIf="icon" aria-hidden="false" [fontIcon]="icon"></mat-icon>
-      <mat-icon *ngIf="svgIcon" aria-hidden="false" [svgIcon]="svgIcon"></mat-icon>
+      <mat-icon *ngIf="icon" aria-hidden="false" [fontIcon]="icon" />
+      <mat-icon *ngIf="svgIcon" aria-hidden="false" [svgIcon]="svgIcon" />
       <typography variant="info-title" content="{{ title }}" />
     </div>
     <div *ngIf="button">
-      <mat-icon *ngIf="button" aria-hidden="false" (click)="button.onClick()" [fontIcon]="button.icon"></mat-icon>
+      <mat-icon *ngIf="button" aria-hidden="false" (click)="button.onClick()" [fontIcon]="button.icon" />
     </div>
   </div>
   <typography
@@ -15,5 +15,5 @@
     variant="info-subtitle"
     content="Click for more details"
   />
-  <ng-content></ng-content>
+  <ng-content />
 </div>
diff --git a/angular-client/src/components/info-graph/info-graph.component.html b/angular-client/src/components/info-graph/info-graph.component.html
index 0bc5c7f4..e0bca76d 100644
--- a/angular-client/src/components/info-graph/info-graph.component.html
+++ b/angular-client/src/components/info-graph/info-graph.component.html
@@ -5,5 +5,5 @@
     [data]="data"
     [title]="subTitle"
     [color]="color"
-  ></graph-component>
+  />
 </info-background>
diff --git a/angular-client/src/components/loading-page/loading-page.component.html b/angular-client/src/components/loading-page/loading-page.component.html
index 09d24ed0..c284e2e3 100644
--- a/angular-client/src/components/loading-page/loading-page.component.html
+++ b/angular-client/src/components/loading-page/loading-page.component.html
@@ -1,3 +1,3 @@
 <div class="spinner-container">
-  <p-progressSpinner></p-progressSpinner>
+  <p-progressSpinner />
 </div>
diff --git a/angular-client/src/components/pie-chart/pie-chart.component.html b/angular-client/src/components/pie-chart/pie-chart.component.html
index 92b53fde..9026a172 100644
--- a/angular-client/src/components/pie-chart/pie-chart.component.html
+++ b/angular-client/src/components/pie-chart/pie-chart.component.html
@@ -8,4 +8,4 @@
   [legend]="chartOptions.legend"
   [dataLabels]="chartOptions.dataLabels"
   [fill]="chartOptions.fill"
-></apx-chart>
+/>
diff --git a/angular-client/src/components/raspberry-pi/raspberry-pi-desktop-content/raspberry-pi-desktop.component.html b/angular-client/src/components/raspberry-pi/raspberry-pi-desktop-content/raspberry-pi-desktop.component.html
index ac03e314..e2326815 100644
--- a/angular-client/src/components/raspberry-pi/raspberry-pi-desktop-content/raspberry-pi-desktop.component.html
+++ b/angular-client/src/components/raspberry-pi/raspberry-pi-desktop-content/raspberry-pi-desktop.component.html
@@ -1,6 +1,6 @@
 <hstack style="width: 100%; height: 100%">
   <vstack style="width: 20%">
-    <circular-percentage [percentage]="cpuUsage" [dimension]="85" [ringColor]="colorRed"></circular-percentage>
+    <circular-percentage [percentage]="cpuUsage" [dimension]="85" [ringColor]="colorRed" />
 
     <typography variant="info-subtitle" content="CPU Usage" />
   </vstack>
@@ -19,7 +19,7 @@
   <divider style="height: 100px"></divider>
 
   <vstack style="width: 20%">
-    <circular-percentage [percentage]="ramUsage" [dimension]="85" [ringColor]="colorPurple"></circular-percentage>
+    <circular-percentage [percentage]="ramUsage" [dimension]="85" [ringColor]="colorPurple" />
     <div style="display: flex; justify-content: center; align-items: center">
       <typography variant="info-subtitle" content="RAM Usage" />
     </div>
@@ -31,7 +31,7 @@
     <hstack style="height: 110px">
       <typography variant="info-value" [content]="wifiRSSI.toString()" />
       <div>
-        <mat-icon svgIcon="wifi"></mat-icon>
+        <mat-icon svgIcon="wifi" />
         <span class="wifi-dbm-unit">dBM</span>
       </div>
     </hstack>
diff --git a/angular-client/src/components/raspberry-pi/raspberry-pi-mobile-content/raspberry-pi-mobile.component.html b/angular-client/src/components/raspberry-pi/raspberry-pi-mobile-content/raspberry-pi-mobile.component.html
index 8be027eb..474f21d5 100644
--- a/angular-client/src/components/raspberry-pi/raspberry-pi-mobile-content/raspberry-pi-mobile.component.html
+++ b/angular-client/src/components/raspberry-pi/raspberry-pi-mobile-content/raspberry-pi-mobile.component.html
@@ -1,7 +1,7 @@
 <vstack style="width: 100%">
   <hstack style="width: 100%; height: 100%">
     <vstack style="width: 33%">
-      <circular-percentage [percentage]="cpuUsage" [dimension]="85" [ringColor]="colorRed"></circular-percentage>
+      <circular-percentage [percentage]="cpuUsage" [dimension]="85" [ringColor]="colorRed" />
 
       <typography variant="info-subtitle" content="CPU Usage" />
     </vstack>
@@ -29,7 +29,7 @@
 
   <hstack style="width: 50%">
     <vstack style="width: 50%">
-      <circular-percentage [percentage]="ramUsage" [dimension]="85" [ringColor]="colorPurple"></circular-percentage>
+      <circular-percentage [percentage]="ramUsage" [dimension]="85" [ringColor]="colorPurple" />
       <div style="display: flex; justify-content: center; align-items: center">
         <typography variant="info-subtitle" content="RAM Usage" />
       </div>
@@ -41,7 +41,7 @@
       <hstack style="height: 110px">
         <typography variant="info-value" [content]="wifiRSSI.toString()" />
         <div>
-          <mat-icon svgIcon="wifi"></mat-icon>
+          <mat-icon svgIcon="wifi" />
           <span class="wifi-dbm-unit">dBM</span>
         </div>
       </hstack>
diff --git a/angular-client/src/components/raspberry-pi/raspberry-pi.component.html b/angular-client/src/components/raspberry-pi/raspberry-pi.component.html
index 9bac895c..3179ebd5 100644
--- a/angular-client/src/components/raspberry-pi/raspberry-pi.component.html
+++ b/angular-client/src/components/raspberry-pi/raspberry-pi.component.html
@@ -7,7 +7,7 @@
     [ramUsage]="ramUsage"
     [wifiRSSI]="wifiRSSI"
     [mcs]="mcs"
-  ></raspberry-pi-mobile>
+  />
   <ng-template #isDesktop>
     <raspberry-pi-desktop
       style="width: 100%"
@@ -15,6 +15,6 @@
       [ramUsage]="ramUsage"
       [wifiRSSI]="wifiRSSI"
       [mcs]="mcs"
-    ></raspberry-pi-desktop>
+    />
   </ng-template>
 </info-background>
diff --git a/angular-client/src/components/sidebar-chip/sidebar-chip.component.html b/angular-client/src/components/sidebar-chip/sidebar-chip.component.html
index 0fa59288..7dba1e02 100644
--- a/angular-client/src/components/sidebar-chip/sidebar-chip.component.html
+++ b/angular-client/src/components/sidebar-chip/sidebar-chip.component.html
@@ -1,4 +1,4 @@
 <div class="chip">
-  <mat-icon style="margin-right: 10px" [svgIcon]="icon"></mat-icon>
+  <mat-icon style="margin-right: 10px" [svgIcon]="icon" />
   <typography variant="sidebar-label" [content]="value" />
 </div>
diff --git a/angular-client/src/components/sidebar-toggle/sidebar-toggle.component.html b/angular-client/src/components/sidebar-toggle/sidebar-toggle.component.html
index ae6806fb..f898dffa 100644
--- a/angular-client/src/components/sidebar-toggle/sidebar-toggle.component.html
+++ b/angular-client/src/components/sidebar-toggle/sidebar-toggle.component.html
@@ -1 +1 @@
-<mat-icon style="color: white" aria-hidden="false" svgIcon="menu" (click)="toggleSidebar()"></mat-icon>
+<mat-icon style="color: white" aria-hidden="false" svgIcon="menu" (click)="toggleSidebar()" />
diff --git a/angular-client/src/components/speed-display/speed-display.component.html b/angular-client/src/components/speed-display/speed-display.component.html
index c9b9cdd8..34838a60 100644
--- a/angular-client/src/components/speed-display/speed-display.component.html
+++ b/angular-client/src/components/speed-display/speed-display.component.html
@@ -1,3 +1,3 @@
 <info-background svgIcon="speed" title="Speed">
-  <half-gauge [current]="34" [max]="100" [min]="0" unit="m/s" color="#ff0000" [size]="400"></half-gauge>
+  <half-gauge [current]="34" [max]="100" [min]="0" unit="m/s" color="#ff0000" [size]="400" />
 </info-background>
diff --git a/angular-client/src/components/speed-over-time-display/speed-over-time-display.component.html b/angular-client/src/components/speed-over-time-display/speed-over-time-display.component.html
index 6e19fa9e..c23b7357 100644
--- a/angular-client/src/components/speed-over-time-display/speed-over-time-display.component.html
+++ b/angular-client/src/components/speed-over-time-display/speed-over-time-display.component.html
@@ -1,2 +1 @@
-<info-graph [data]="data" graphContainerId="speedOverTimeGraph" icon="speed" title="Speed Over Time" color="primary">
-</info-graph>
+<info-graph [data]="data" graphContainerId="speedOverTimeGraph" icon="speed" title="Speed Over Time" color="primary" />
diff --git a/angular-client/src/components/vstack/vstack.component.html b/angular-client/src/components/vstack/vstack.component.html
index 457c1679..17da9548 100644
--- a/angular-client/src/components/vstack/vstack.component.html
+++ b/angular-client/src/components/vstack/vstack.component.html
@@ -1,3 +1,3 @@
 <div fxLayout="column" fxLayoutAlign="center {{ align }}" [fxLayoutGap]="spacing">
-  <ng-content></ng-content>
+  <ng-content />
 </div>
diff --git a/angular-client/src/pages/charging-page/components/battery-info-display/battery-info-display.html b/angular-client/src/pages/charging-page/components/battery-info-display/battery-info-display.html
index 7da4098b..59471bfa 100644
--- a/angular-client/src/pages/charging-page/components/battery-info-display/battery-info-display.html
+++ b/angular-client/src/pages/charging-page/components/battery-info-display/battery-info-display.html
@@ -7,7 +7,7 @@
     [dischargeCurrentLimit]="dischargeCurrentLimit"
     [packTemp]="packTemp"
     [stateOfCharge]="stateOfCharge"
-  ></battery-info-mobile>
+  />
   <ng-template #isDesktop>
     <battery-info-desktop
       style="width: 100%"
@@ -16,6 +16,6 @@
       [dischargeCurrentLimit]="dischargeCurrentLimit"
       [packTemp]="packTemp"
       [stateOfCharge]="stateOfCharge"
-    ></battery-info-desktop>
+    />
   </ng-template>
 </info-background>
diff --git a/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-display/cell-temp-display.component.html b/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-display/cell-temp-display.component.html
index eb1110cd..33bee114 100644
--- a/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-display/cell-temp-display.component.html
+++ b/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-display/cell-temp-display.component.html
@@ -19,6 +19,6 @@
     <!--TODO: (temp fix: padding-bottom) temp fix for voltage graph being centered (and not all the way on bottom of comp)-->
     <!--if it is not desktop, we want to show graph seperately... TODO: need to figure out best logic for enforcing that this is done... 
     or just don't enforce -->
-    <cell-temp-graph style="width: 80%; padding-bottom: 5vh"></cell-temp-graph>
+    <cell-temp-graph style="width: 80%; padding-bottom: 5vh" />
   </hstack>
 </info-background>
diff --git a/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-graph/cell-temp-graph.component.html b/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-graph/cell-temp-graph.component.html
index 5a79bf4b..1e24b534 100644
--- a/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-graph/cell-temp-graph.component.html
+++ b/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-graph/cell-temp-graph.component.html
@@ -4,5 +4,4 @@
   icon="speed"
   title="Voltage Over Time"
   color="#ffffff"
->
-</graph-component>
+/>
diff --git a/angular-client/src/pages/charging-page/components/high-low-cell/high-low-cell-display/high-low-cell-display.component.html b/angular-client/src/pages/charging-page/components/high-low-cell/high-low-cell-display/high-low-cell-display.component.html
index 74aa31c0..c0b8caa9 100644
--- a/angular-client/src/pages/charging-page/components/high-low-cell/high-low-cell-display/high-low-cell-display.component.html
+++ b/angular-client/src/pages/charging-page/components/high-low-cell/high-low-cell-display/high-low-cell-display.component.html
@@ -27,6 +27,6 @@
     <!--TODO: (temp fix: padding-bottom) temp fix for voltage graph being centered (and not all the way on bottom of comp)-->
     <!--if it is not desktop, we want to show graph seperately... TODO: need to figure out best logic for enforcing that this is done... 
       or just don't enforce -->
-    <high-low-cell-graph style="width: 70%; padding-bottom: 5vh"></high-low-cell-graph>
+    <high-low-cell-graph style="width: 70%; padding-bottom: 5vh" />
   </hstack>
 </info-background>
diff --git a/angular-client/src/pages/charging-page/components/high-low-cell/high-low-cell-graph/high-low-cell-graph.component.html b/angular-client/src/pages/charging-page/components/high-low-cell/high-low-cell-graph/high-low-cell-graph.component.html
index 98fbe951..3b192a3c 100644
--- a/angular-client/src/pages/charging-page/components/high-low-cell/high-low-cell-graph/high-low-cell-graph.component.html
+++ b/angular-client/src/pages/charging-page/components/high-low-cell/high-low-cell-graph/high-low-cell-graph.component.html
@@ -7,5 +7,4 @@
   [data2]="lowVoltsData"
   graphContainerId="highLowCellGraph"
   icon="speed"
->
-</double-line-graph>
+/>
diff --git a/angular-client/src/pages/charging-page/components/pack-voltage/pack-voltage-display/pack-voltage-display.component.html b/angular-client/src/pages/charging-page/components/pack-voltage/pack-voltage-display/pack-voltage-display.component.html
index 29d4324c..ef1ad26c 100644
--- a/angular-client/src/pages/charging-page/components/pack-voltage/pack-voltage-display/pack-voltage-display.component.html
+++ b/angular-client/src/pages/charging-page/components/pack-voltage/pack-voltage-display/pack-voltage-display.component.html
@@ -3,6 +3,6 @@
     <hstack style="width: 20%">
       <typography variant="info-value" [content]="voltage.toString() + 'V'" />
     </hstack>
-    <pack-voltage-graph style="width: 70%; padding-bottom: 5vh"></pack-voltage-graph>
+    <pack-voltage-graph style="width: 70%; padding-bottom: 5vh" />
   </hstack>
 </info-background>
diff --git a/angular-client/src/pages/charging-page/components/pack-voltage/pack-voltage-graph/pack-voltage-graph.component.html b/angular-client/src/pages/charging-page/components/pack-voltage/pack-voltage-graph/pack-voltage-graph.component.html
index 6eb1718e..b1141483 100644
--- a/angular-client/src/pages/charging-page/components/pack-voltage/pack-voltage-graph/pack-voltage-graph.component.html
+++ b/angular-client/src/pages/charging-page/components/pack-voltage/pack-voltage-graph/pack-voltage-graph.component.html
@@ -1,2 +1 @@
-<graph-component title="Pack Temp" color="#ffff00" [data]="packVoltData" graphContainerId="packTempGraph" icon="speed">
-</graph-component>
+<graph-component title="Pack Temp" color="#ffff00" [data]="packVoltData" graphContainerId="packTempGraph" icon="speed" />
diff --git a/angular-client/src/pages/graph-page/graph-caption/graph-caption.component.html b/angular-client/src/pages/graph-page/graph-caption/graph-caption.component.html
index d657143d..52734a50 100644
--- a/angular-client/src/pages/graph-page/graph-caption/graph-caption.component.html
+++ b/angular-client/src/pages/graph-page/graph-caption/graph-caption.component.html
@@ -31,13 +31,13 @@
       [onClick]="onClearDataType"
       label="Clear Data Type"
       additionalStyles="background-color: #323232; border: 1.4px solid #027bd7"
-    ></argos-button>
+    />
     <div *ngIf="run; else otherBlock">
       <argos-button
         [onClick]="onSetRealtime"
         label="Realtime"
         additionalStyles="background-color: #323232; border: 1.4px solid #027bd7"
-      ></argos-button>
+      />
     </div>
     <ng-template #otherBlock>
       <div style="width: 140px; height: 45px"></div>
diff --git a/angular-client/src/pages/graph-page/graph-caption/run-selector/run-selector.component.html b/angular-client/src/pages/graph-page/graph-caption/run-selector/run-selector.component.html
index d68519b3..3234433f 100644
--- a/angular-client/src/pages/graph-page/graph-caption/run-selector/run-selector.component.html
+++ b/angular-client/src/pages/graph-page/graph-caption/run-selector/run-selector.component.html
@@ -1 +1 @@
-<argos-button [onClick]="openDialog" [label]="label" additionalStyles="background-color: #027bd7"></argos-button>
+<argos-button [onClick]="openDialog" [label]="label" additionalStyles="background-color: #027bd7" />
diff --git a/angular-client/src/pages/graph-page/graph-sidebar/graph-sidebar-desktop/graph-sidebar-desktop.component.html b/angular-client/src/pages/graph-page/graph-sidebar/graph-sidebar-desktop/graph-sidebar-desktop.component.html
index d8eae964..43bcda4f 100644
--- a/angular-client/src/pages/graph-page/graph-sidebar/graph-sidebar-desktop/graph-sidebar-desktop.component.html
+++ b/angular-client/src/pages/graph-page/graph-sidebar/graph-sidebar-desktop/graph-sidebar-desktop.component.html
@@ -3,7 +3,7 @@
     <mat-toolbar class="search-block mat-elevation-z4">
       <mat-toolbar-row style="padding: 0px">
         <button mat-icon-button style="padding: 6px; width: 36px; height: 36px" disabled>
-          <mat-icon style="padding: 0px; color: #808080" svgIcon="search"></mat-icon>
+          <mat-icon style="padding: 0px; color: #808080" svgIcon="search" />
         </button>
         <form [formGroup]="filterForm">
           <input matInput class="search-control" type="text" placeholder="Search Topic" formControlName="searchFilter" />
diff --git a/angular-client/src/pages/landing-page/landing-page-mobile/landing-page-mobile.component.html b/angular-client/src/pages/landing-page/landing-page-mobile/landing-page-mobile.component.html
index 3c7b1343..225cf458 100644
--- a/angular-client/src/pages/landing-page/landing-page-mobile/landing-page-mobile.component.html
+++ b/angular-client/src/pages/landing-page/landing-page-mobile/landing-page-mobile.component.html
@@ -3,16 +3,16 @@
   <typography variant="x-large-title" [content]="time | date: 'HH:mm:ss'"></typography>
   <typography variant="x-large-title" content="{{ time | date: 'MM/dd/yyyy' }}"></typography>
 
-  <driver-component style="width: 100%"></driver-component>
+  <driver-component style="width: 100%" />
 
-  <speed-over-time-display style="width: 100%"></speed-over-time-display>
-  <acceleration-over-time-display style="width: 100%"></acceleration-over-time-display>
+  <speed-over-time-display style="width: 100%" />
+  <acceleration-over-time-display style="width: 100%" />
 
-  <acceleration-graphs style="width: 100%"></acceleration-graphs>
+  <acceleration-graphs style="width: 100%" />
 
-  <map-info-display style="width: 100%"></map-info-display>
+  <map-info-display style="width: 100%" />
 
-  <motor-info style="width: 100%; height: 250px"></motor-info>
-  <battery-info-display style="width: 100%; height: 250px"></battery-info-display>
-  <raspberry-pi style="width: 100%"></raspberry-pi>
+  <motor-info style="width: 100%; height: 250px" />
+  <battery-info-display style="width: 100%; height: 250px" />
+  <raspberry-pi style="width: 100%" />
 </vstack>
diff --git a/angular-client/src/pages/landing-page/landing-page.component.html b/angular-client/src/pages/landing-page/landing-page.component.html
index fdddfc5d..b57c37ad 100644
--- a/angular-client/src/pages/landing-page/landing-page.component.html
+++ b/angular-client/src/pages/landing-page/landing-page.component.html
@@ -14,7 +14,7 @@
           <hstack style="width: 100%"
             ><typography variant="header" content="{{ time | date: 'MM/dd/yyyy' }} | {{ location }} " />
             <latency-display style="width: 40%" />
-            <argos-button [onClick]="this.onStartNewRun" label="Start New Run"></argos-button>
+            <argos-button [onClick]="this.onStartNewRun" label="Start New Run" />
           </hstack>
 
           <hstack style="width: 100%">
@@ -37,7 +37,7 @@
         <map-info-display style="width: 50%" />
 
         <vstack style="width: 50%">
-          <motor-info style="width: 100%; height: 250px"> </motor-info>
+          <motor-info style="width: 100%; height: 250px" />
         </vstack>
       </hstack>
 
diff --git a/angular-client/src/pages/map/map.component.html b/angular-client/src/pages/map/map.component.html
index 4b7dfd9c..8f24e6ad 100644
--- a/angular-client/src/pages/map/map.component.html
+++ b/angular-client/src/pages/map/map.component.html
@@ -1,14 +1,14 @@
 <div *ngIf="isError; else checkIsLoading">
-  <error-page [errorMessage]="error!.message"></error-page>
+  <error-page [errorMessage]="error!.message" />
 </div>
 <ng-template #checkIsLoading>
   <div *ngIf="isLoading; else displayMap">
-    <loading-page></loading-page>
+    <loading-page />
   </div>
 </ng-template>
 <ng-template #displayMap>
   <div id="map" class="map-container">
-    <sidebar-toggle style="position: absolute; margin-top: 16px; margin-left: 16px"></sidebar-toggle>
+    <sidebar-toggle style="position: absolute; margin-top: 16px; margin-left: 16px" />
     <run-selector
       style="position: absolute; margin-bottom: 16px; margin-right: 16px; bottom: 0; right: 0"
       [selectRun]="onRunSelected"