fix: show devices name as a mat-subtitle

Author: manekinekko

src/app/dashboard/dashboard.component.html

@@ -12,12 +12,12 @@
       <mat-card class="dashboard-card">
         <mat-card-header>
           <mat-card-title>
-            Battery Level <span *ngIf="(battery.device | async) as device">({{ device.name }})</span>
+            Battery Level
             <button mat-icon-button class="more-button" [matMenuTriggerFor]="menuBattery" aria-label="Toggle menu">
               <mat-icon>more_vert</mat-icon>
             </button>
             <mat-menu #menuBattery="matMenu" xPosition="before">
-              <button mat-menu-item *ngIf="(battery.device | async) === undefined" (click)="battery.requestValue()">
+              <button mat-menu-item *ngIf="(battery.device | async) === null" (click)="battery.requestValue()">
                 <mat-icon>bluetooth_searching</mat-icon>
                 Connect
               </button>
@@ -27,6 +27,9 @@
               </button>
             </mat-menu>
           </mat-card-title>
+          <mat-card-subtitle *ngIf="(battery.device | async) as device">
+            {{ device.name }}
+          </mat-card-subtitle>
         </mat-card-header>
         <mat-card-content class="dashboard-card-content">
           <ble-battery-level #battery></ble-battery-level>
@@ -40,12 +43,12 @@
       <mat-card class="dashboard-card">
         <mat-card-header>
           <mat-card-title>
-            Humidity Level <span *ngIf="(humidity.device | async) as device">({{ device.name }})</span>
+            Humidity Level
             <button mat-icon-button class="more-button" [matMenuTriggerFor]="menuHumidity" aria-label="Toggle menu">
               <mat-icon>more_vert</mat-icon>
             </button>
             <mat-menu #menuHumidity="matMenu" xPosition="before">
-              <button mat-menu-item *ngIf="(humidity.device | async) === undefined" (click)="humidity.requestValue()">
+              <button mat-menu-item *ngIf="(humidity.device | async) === null" (click)="humidity.requestValue()">
                 <mat-icon>bluetooth_searching</mat-icon>
                 Connect
               </button>
@@ -55,6 +58,9 @@
               </button>
             </mat-menu>
           </mat-card-title>
+          <mat-card-subtitle *ngIf="(humidity.device | async) as device">
+            {{ device.name }}
+          </mat-card-subtitle>
         </mat-card-header>
         <mat-card-content class="dashboard-card-content">
           <ble-humidity #humidity></ble-humidity>
@@ -68,12 +74,12 @@
       <mat-card class="dashboard-card">
         <mat-card-header>
           <mat-card-title>
-            Temperature <span *ngIf="(temperature.device | async) as device">({{ device.name }})</span>
+            Temperature
             <button mat-icon-button class="more-button" [matMenuTriggerFor]="menuTemperature" aria-label="Toggle menu">
               <mat-icon>more_vert</mat-icon>
             </button>
             <mat-menu #menuTemperature="matMenu" xPosition="before">
-              <button mat-menu-item *ngIf="(temperature.device | async) === undefined" (click)="temperature.requestValue()">
+              <button mat-menu-item *ngIf="(temperature.device | async) === null" (click)="temperature.requestValue()">
                 <mat-icon>bluetooth_searching</mat-icon>
                 Connect
               </button>
@@ -83,6 +89,9 @@
               </button>
             </mat-menu>
           </mat-card-title>
+          <mat-card-subtitle *ngIf="(temperature.device | async) as device">
+            {{ device.name }}
+          </mat-card-subtitle>
         </mat-card-header>
         <mat-card-content class="dashboard-card-content">
           <ble-temperature #temperature></ble-temperature>