update to angular 21

package.json

@@ -9,24 +9,24 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "20.3.4",
-    "@angular/common": "20.3.4",
-    "@angular/compiler": "20.3.4",
-    "@angular/core": "20.3.4",
-    "@angular/platform-browser": "20.3.4",
-    "@angular/platform-browser-dynamic": "20.3.4",
+    "@angular/animations": "21.2.0",
+    "@angular/common": "21.2.0",
+    "@angular/compiler": "21.2.0",
+    "@angular/core": "21.2.0",
+    "@angular/platform-browser": "21.2.0",
+    "@angular/platform-browser-dynamic": "21.2.0",
     "luxon": "3.7.2",
     "rxjs": "7.8.2",
     "tslib": "2.8.1",
     "zone.js": "0.15.1"
   },
   "devDependencies": {
-    "@angular/build": "20.3.5",
-    "@angular/cli": "20.3.5",
-    "@angular/compiler-cli": "20.3.4",
+    "@angular/build": "^21.2.0",
+    "@angular/cli": "21.2.0",
+    "@angular/compiler-cli": "21.2.0",
     "@types/luxon": "3.7.1",
     "@types/node": "22.16.5",
     "prettier": "3.6.2",
     "typescript": "5.9.3"
   }
-}
+}

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));

tsconfig.json

@@ -18,10 +18,6 @@
     "importHelpers": true,
     "target": "ES2022",
     "module": "es2020",
-    "lib": [
-      "es2020",
-      "dom"
-    ],
     "useDefineForClassFields": false
   },
   "angularCompilerOptions": {