feat(): Use new control flow syntax

inpercima · Dec 31, 2023 · fb5afb1 · fb5afb1
1 parent 3bee8a5
commit fb5afb1
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 23 deletions.
diff --git a/src/app/features/dashboard/dashboard.component.html b/src/app/features/dashboard/dashboard.component.html
@@ -20,29 +20,33 @@
     </form>
   </mat-card-content>
 </mat-card>
-<mat-card class="w-7/12 mx-auto" *ngIf="appRunning">
+@if(appRunning) {
+<mat-card class="w-7/12 mx-auto">
   <mat-card-content>
-    <div *ngIf="mcStatus" style="width: 64px; height: 64px;" [style.background-image]="headerImage()"></div>
-    <div *ngIf="mcStatus">
-      <p>
-        Data will be refreshed every 5 seconds.
-      </p>
-      <p>
-        Status: {{ mcStatus.ip }} is <strong>{{ mcStatus.online ? 'online' : 'offline' }}</strong>
-        <ng-template *ngIf="mcStatus.debug.cachetime > 0">at {{ mcStatus.debug.cachetime * 1000 | date: 'yyyy/MM/dd HH:mm:ss' }}</ng-template>
-      </p>
-      <p>
-        Description: {{ mcStatus.motd.html[0] }}
-      </p>
-      <p>
-        Version: {{ mcStatus.version }}
-        <br>
-        Players: {{ mcStatus.players.online}}/{{mcStatus.players.max }}
-      </p>
-    </div>
-    <p *ngIf="!mcStatus">
+    @if(mcStatus) {
+    <div style="width: 64px; height: 64px;" [style.background-image]="headerImage()"></div>
+    <p>
+      Data will be refreshed every 5 seconds.
+    </p>
+    <p>
+      Status: {{ mcStatus.ip }} is <strong>{{ mcStatus.online ? 'online' : 'offline' }}</strong>
+      <ng-template *ngIf="mcStatus.debug.cachetime > 0">at {{ mcStatus.debug.cachetime * 1000 | date: 'yyyy/MM/dd
+        HH:mm:ss' }}</ng-template>
+    </p>
+    <p>
+      Description: {{ mcStatus.motd.html[0] }}
+    </p>
+    <p>
+      Version: {{ mcStatus.version }}
+      <br>
+      Players: {{ mcStatus.players.online}}/{{mcStatus.players.max }}
+    </p>
+    } @else {
+    <p>
       Checking Server: {{ form.value.serverIp }}:{{ form.value.serverPort }}
       <mat-progress-bar color="primary" mode="indeterminate" value="50"></mat-progress-bar>
     </p>
+    }
   </mat-card-content>
 </mat-card>
+}
diff --git a/src/app/features/dashboard/dashboard.component.ts b/src/app/features/dashboard/dashboard.component.ts
@@ -1,4 +1,4 @@
-import { DatePipe, NgIf } from '@angular/common';
+import { DatePipe } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
@@ -9,8 +9,8 @@ import { MatInputModule } from '@angular/material/input';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
 import { Subscription, timer } from 'rxjs';
-import { CheckService } from '../../core/check.service';
 import { environment } from '../../../environments/environment';
+import { CheckService } from '../../core/check.service';
 import { Status } from '../../core/status.model';
 
 @Component({
@@ -24,7 +24,6 @@ import { Status } from '../../core/status.model';
     MatFormFieldModule,
     MatInputModule,
     MatProgressBarModule,
-    NgIf,
     ReactiveFormsModule,
   ],
   templateUrl: './dashboard.component.html',