migrate to control flow statements in templates

src/app/bus/bus.component.html

@@ -1,14 +1,22 @@
-<section *ngIf="departures" (click)="update()" [class.outdated]="error" [appSpinner]="dataLoading">
-    <!-- Heading -->
-    <h2>{{ departureStation }}</h2>
+@if (departures) {
+    <section (click)="update()" [class.outdated]="error" [appSpinner]="dataLoading">
+        <!-- Heading -->
+        <h2>{{ departureStation }}</h2>
 
-    <!-- Departure times table -->
-    <table class="departures h-ruled">
-        <tr @fadeTableRow *ngFor="let bus of departures; trackBy: journeyId" [class.bus-delayed]="bus.delay">
-            <td class="bus-time">{{ bus.TargetDepartureTime | date:'HH:mm' }}</td>
-            <td class="bus-delay"><span class="delay-value" *ngIf="bus.delay">{{ bus.delay }}</span></td>
-            <td class="bus-line">{{ bus.LinePublicNumber }}</td>
-            <td class="bus-dest">{{ bus.DestinationName50 }}</td>
-        </tr>
-    </table>
-</section>
+        <!-- Departure times table -->
+        <table class="departures h-ruled">
+            @for (bus of departures; track bus.JourneyNumber) {
+                <tr @fadeTableRow [class.bus-delayed]="bus.delay">
+                    <td class="bus-time">{{ bus.TargetDepartureTime | date:'HH:mm' }}</td>
+                    <td class="bus-delay">
+                        @if (bus.delay) {
+                            <span class="delay-value">{{ bus.delay }}</span>
+                        }
+                    </td>
+                    <td class="bus-line">{{ bus.LinePublicNumber }}</td>
+                    <td class="bus-dest">{{ bus.DestinationName50 }}</td>
+                </tr>
+            }
+        </table>
+    </section>
+}

src/app/bus/bus.component.ts

@@ -37,10 +37,6 @@ export class BusComponent implements OnInit, DataLoading {
             });
     }
 
-    journeyId(index: number, journey: any): string {
-        return journey.JourneyNumber;
-    }
-
     private processData(data: any) {
         // Remove any error
         this.error = undefined;

src/app/chart/chart.component.html

@@ -1,10 +1,12 @@
 <section (click)="update()" [class.outdated]="error" [appSpinner]="dataLoading">
     <h2>COVID-19 daily figures</h2>
 
-    <div *ngIf="chartDatasets">
-        <canvas baseChart width="540" height="200" type="line"
-                [datasets]="chartDatasets"
-                [labels]="chartLabels"
-                [options]="chartOptions"></canvas>
-    </div>
+    @if (chartDatasets) {
+        <div>
+            <canvas baseChart width="540" height="200" type="line"
+                    [datasets]="chartDatasets"
+                    [labels]="chartLabels"
+                    [options]="chartOptions"></canvas>
+        </div>
+    }
 </section>

src/app/domotics/domotics.component.html

@@ -1,15 +1,20 @@
-<section *ngIf="items" (click)="update()" [class.outdated]="error" [appSpinner]="dataLoading">
-    <!-- Heading -->
-    <h2>Security</h2>
+@if (items) {
+    <section (click)="update()" [class.outdated]="error" [appSpinner]="dataLoading">
+        <!-- Heading -->
+        <h2>Security</h2>
 
-    <!-- Security items -->
-    <table class="items v-ruled">
-        <tr>
-            <th *ngFor="let item of items">{{ item.label || item.name }}</th>
-        </tr>
-        <tr>
-            <td *ngFor="let item of items" class="state"
-                [ngClass]="item.state | lowercase">{{ item.state | lowercase }}</td>
-        </tr>
-    </table>
-</section>
+        <!-- Security items -->
+        <table class="items v-ruled">
+            <tr>
+                @for (item of items; track item.name) {
+                    <th>{{ item.label || item.name }}</th>
+                }
+            </tr>
+            <tr>
+                @for (item of items; track item.name) {
+                    <td class="state" [ngClass]="item.state | lowercase">{{ item.state | lowercase }}</td>
+                }
+            </tr>
+        </table>
+    </section>
+}

src/app/fx/fx.component.html

@@ -1,20 +1,28 @@
-<section *ngIf="fxRates" (click)="update()" [class.outdated]="error" [appSpinner]="dataLoading">
-    <h2>Exchange rates</h2>
+@if (fxRates) {
+    <section (click)="update()" [class.outdated]="error" [appSpinner]="dataLoading">
+        <h2>Exchange rates</h2>
 
-    <!-- FX rates -->
-    <table class="fx v-ruled">
-        <tr>
-            <td class="fx-ccy" *ngFor="let rate of fxRates">{{ rate.symbol }}</td>
-        </tr>
-        <tr>
-            <td class="fx-rate" *ngFor="let rate of fxRates">{{ rate.rate | number:'.2-2' }}</td>
-        </tr>
-        <tr>
-            <td class="fx-move" *ngFor="let rate of fxRates">
-                <span [class.fx-move-up]="rate.move > 0" [class.fx-move-down]="rate.move < 0">
-                    {{ rate.move | number:'.2-2' }}
-                </span>
-            </td>
-        </tr>
-    </table>
-</section>
+        <!-- FX rates -->
+        <table class="fx v-ruled">
+            <tr>
+                @for (rate of fxRates; track rate) {
+                    <td class="fx-ccy">{{ rate.symbol }}</td>
+                }
+            </tr>
+            <tr>
+                @for (rate of fxRates; track rate) {
+                    <td class="fx-rate">{{ rate.rate | number:'.2-2' }}</td>
+                }
+            </tr>
+            <tr>
+                @for (rate of fxRates; track rate) {
+                    <td class="fx-move">
+                        <span [class.fx-move-up]="rate.move > 0" [class.fx-move-down]="rate.move < 0">
+                            {{ rate.move | number:'.2-2' }}
+                        </span>
+                    </td>
+                }
+            </tr>
+        </table>
+    </section>
+}

src/app/news/news.component.html

@@ -1,8 +1,12 @@
 <section (click)="update()" [class.outdated]="error" [appSpinner]="dataLoading">
-    <div *ngIf="currentItem as i" [@fadeInOnChange]="curIndex" class="news-item">
-        <div class="news-image" *ngIf="feedImageUrl"><img [src]="feedImageUrl" alt="News Image"></div>
-        <div class="news-title">{{ i.title }}</div>
-        <div class="news-desc">{{ i.description }}</div>
-        <div class="news-updated">{{ i.lastUpdate | timeAgo }}</div>
-    </div>
+    @if (currentItem; as i) {
+        <div [@fadeInOnChange]="curIndex" class="news-item">
+            @if (feedImageUrl) {
+                <div class="news-image"><img [src]="feedImageUrl" alt="News Image"></div>
+            }
+            <div class="news-title">{{ i.title }}</div>
+            <div class="news-desc">{{ i.description }}</div>
+            <div class="news-updated">{{ i.lastUpdate | timeAgo }}</div>
+        </div>
+    }
 </section>

src/app/train/train.component.html

@@ -1,18 +1,28 @@
-<section *ngIf="departures" (click)="update()" [class.outdated]="error" [appSpinner]="dataLoading">
-    <!-- Heading -->
-    <h2>{{ departureStation }}</h2>
+@if (departures) {
+    <section (click)="update()" [class.outdated]="error" [appSpinner]="dataLoading">
+        <!-- Heading -->
+        <h2>{{ departureStation }}</h2>
 
-    <!-- Departure times table -->
-    <table class="departures h-ruled">
-        <tr @fadeTableRow *ngFor="let train of departures; trackBy: journeyId" [class.train-delayed]="train.delay" [class.train-canceled]="train.cancelled">
-            <td class="train-time" >{{ train.plannedDateTime | date:'HH:mm' }}</td>
-            <td class="train-delay"><span class="delay-value" *ngIf="train.delay">{{ train.delay }}</span></td>
-            <td class="train-dest" >
-                <div class="train-dest-name">{{ train.direction }}</div>
-                <div class="train-notes" *ngFor="let msg of train.disruptions">{{ msg.text }}</div>
-            </td>
-            <td class="train-type" >{{ train.product.longCategoryName }}</td>
-            <td class="train-platf">{{ train.actualTrack || train.plannedTrack }}</td>
-        </tr>
-    </table>
-</section>
+        <!-- Departure times table -->
+        <table class="departures h-ruled">
+            @for (train of departures; track train.name) {
+                <tr @fadeTableRow [class.train-delayed]="train.delay" [class.train-canceled]="train.cancelled">
+                    <td class="train-time" >{{ train.plannedDateTime | date:'HH:mm' }}</td>
+                    <td class="train-delay">
+                        @if (train.delay) {
+                            <span class="delay-value">{{ train.delay }}</span>
+                        }
+                    </td>
+                    <td class="train-dest" >
+                        <div class="train-dest-name">{{ train.direction }}</div>
+                        @for (msg of train.disruptions; track msg) {
+                            <div class="train-notes">{{ msg.text }}</div>
+                        }
+                    </td>
+                    <td class="train-type" >{{ train.product.longCategoryName }}</td>
+                    <td class="train-platf">{{ train.actualTrack || train.plannedTrack }}</td>
+                </tr>
+            }
+        </table>
+    </section>
+}

src/app/train/train.component.ts

@@ -46,10 +46,6 @@ export class TrainComponent implements OnInit, DataLoading {
             });
     }
 
-    journeyId(index: number, journey: ExtendedTrainDeparture): string {
-        return journey.name;
-    }
-
     private processData(data: TrainDeparture[]) {
         // Remove any error
         this.error = undefined;