update to angular 21

src/app/app.component.html

@@ -1,7 +1,4 @@
-<app-timezone-list
-  *ngIf="fiveOclocks"
-  [timezones]="fiveOclocks"
-  [closest]="fiveOclock"
-  [showAll]="showAll"
-  (click)="toggleView()">
-</app-timezone-list>
+@if (fiveOclocks) {
+  <app-timezone-list [timezones]="fiveOclocks" [closest]="fiveOclock" [showAll]="showAll" (click)="toggleView()">
+  </app-timezone-list>
+}

src/app/timezone/components/timezone-list/timezone-list.component.html

@@ -3,19 +3,19 @@
   [@displayState]="state"
   (@displayState.start)="animationEvent($event)"
   (@displayState.done)="animationEvent($event)">
-  <ng-container *ngIf="showAllItems; else single">
-    <div
-      *ngFor="let timezone of timezones"
-      class="container"
-      [ngStyle]="{ height: timezones.length == 1 ? '100%' : 'auto' }">
-      <h1 class="timezone">{{ timezone.name.replace('_', ' ') }}</h1>
-      <h2 class="time">{{ timezone.time?.toFormat('tt') }}</h2>
-    </div>
-  </ng-container>
-  <ng-template #single>
-    <div *ngIf="closest" class="single-container">
-      <h1 class="timezone">{{ closest.name.replace('_', ' ') }}</h1>
-      <h2 class="time">{{ closest.time?.toFormat('tt') }}</h2>
-    </div>
-  </ng-template>
+  @if (showAllItems) {
+    @for (timezone of timezones; track timezone) {
+      <div class="container" [ngStyle]="{ height: timezones.length == 1 ? '100%' : 'auto' }">
+        <h1 class="timezone">{{ timezone.name.replace('_', ' ') }}</h1>
+        <h2 class="time">{{ timezone.time?.toFormat('tt') }}</h2>
+      </div>
+    }
+  } @else {
+    @if (closest) {
+      <div class="single-container">
+        <h1 class="timezone">{{ closest.name.replace('_', ' ') }}</h1>
+        <h2 class="time">{{ closest.time?.toFormat('tt') }}</h2>
+      </div>
+    }
+  }
 </div>

src/main.ts

@@ -1,4 +1,4 @@
-import { enableProdMode } from '@angular/core';
+import { enableProdMode, provideZoneChangeDetection } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 import { AppModule } from './app/app.module';
@@ -9,5 +9,5 @@ if (environment.production) {
 }
 
 platformBrowserDynamic()
-  .bootstrapModule(AppModule)
+  .bootstrapModule(AppModule, { applicationProviders: [provideZoneChangeDetection()] })
   .catch((err) => console.error(err));