update angular to v22

package.json

@@ -9,24 +9,24 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "21.2.6",
-    "@angular/common": "21.2.6",
-    "@angular/compiler": "21.2.6",
-    "@angular/core": "21.2.6",
-    "@angular/platform-browser": "21.2.6",
-    "@angular/platform-browser-dynamic": "21.2.6",
+    "@angular/animations": "22.0.0",
+    "@angular/common": "22.0.0",
+    "@angular/compiler": "22.0.0",
+    "@angular/core": "22.0.0",
+    "@angular/platform-browser": "22.0.0",
+    "@angular/platform-browser-dynamic": "22.0.0",
     "luxon": "3.7.2",
     "rxjs": "7.8.2",
     "tslib": "2.8.1",
     "zone.js": "0.16.1"
   },
   "devDependencies": {
-    "@angular/build": "^21.2.5",
-    "@angular/cli": "21.2.5",
-    "@angular/compiler-cli": "21.2.6",
+    "@angular/build": "^22.0.0",
+    "@angular/cli": "22.0.0",
+    "@angular/compiler-cli": "22.0.0",
     "@types/luxon": "3.7.1",
     "@types/node": "22.16.5",
     "prettier": "3.8.3",
-    "typescript": "5.9.3"
+    "typescript": "6.0.3"
   }
 }

src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { interval, startWith } from 'rxjs';
 import { GetClosestTimezoneFrom, Timezone } from './timezone/models/timezone.model';
 import { TimezoneService } from './timezone/services/timezone.service';
@@ -7,6 +7,7 @@ import { TimezoneService } from './timezone/services/timezone.service';
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: false,
 })
 export class AppComponent {
@@ -17,9 +18,7 @@ export class AppComponent {
 
   timezones: string[] = [];
 
-  constructor(
-    private timezoneService: TimezoneService,
-  ) {
+  constructor(private timezoneService: TimezoneService) {
     const currentTimezone = this.timezoneService.getCurrentTimezone();
     if (currentTimezone) {
       this.timezones = this.timezoneService.getTimezones();

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

@@ -1,5 +1,5 @@
 import { animate, state, style, transition, trigger } from '@angular/animations';
-import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { Component, Input, OnChanges, OnInit, SimpleChanges, ChangeDetectionStrategy } from '@angular/core';
 import { Timezone } from '../../models/timezone.model';
 
 @Component({
@@ -24,6 +24,7 @@ import { Timezone } from '../../models/timezone.model';
       transition('hide=>show', animate('450ms ease-in')),
     ]),
   ],
+  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: false,
 })
 export class TimezoneListComponent implements OnInit, OnChanges {

tsconfig.app.json

@@ -6,5 +6,13 @@
     "types": []
   },
   "files": ["src/main.ts", "src/polyfills.ts"],
-  "include": ["src/**/*.d.ts"]
+  "include": ["src/**/*.d.ts"],
+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    }
+  }
 }