Updated to Angular v19

package.json

@@ -13,33 +13,33 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^18.2.9",
-    "@angular/cdk": "^18.2.10",
-    "@angular/common": "^18.2.9",
-    "@angular/compiler": "^18.2.9",
-    "@angular/core": "^18.2.9",
-    "@angular/forms": "^18.2.9",
-    "@angular/material": "^18.2.10",
-    "@angular/platform-browser": "^18.2.9",
-    "@angular/platform-browser-dynamic": "^18.2.9",
-    "@angular/router": "^18.2.9",
-    "chart.js": "^4.4.5",
+    "@angular/animations": "^19.0.0",
+    "@angular/cdk": "^19.0.0",
+    "@angular/common": "^19.0.0",
+    "@angular/compiler": "^19.0.0",
+    "@angular/core": "^19.0.0",
+    "@angular/forms": "^19.0.0",
+    "@angular/material": "^19.0.0",
+    "@angular/platform-browser": "^19.0.0",
+    "@angular/platform-browser-dynamic": "^19.0.0",
+    "@angular/router": "^19.0.0",
+    "chart.js": "^4.4.6",
     "chartjs-plugin-datalabels": "^2.2.0",
     "ng2-charts": "^6.0.1",
     "rxjs": "~7.8.1",
-    "tslib": "^2.8.0"
+    "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.2.10",
-    "@angular/cli": "^18.2.10",
-    "@angular/compiler-cli": "^18.2.9",
+    "@angular-devkit/build-angular": "^19.0.0",
+    "@angular/cli": "^19.0.0",
+    "@angular/compiler-cli": "^19.0.0",
     "@types/jasmine": "~5.1.4",
     "jasmine-core": "~5.4.0",
     "karma": "~6.4.4",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.1",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "typescript": "~5.5.4"
+    "typescript": "~5.6.3"
   }
 }

src/app/age-analysis-line/age-analysis-line.component.ts

@@ -1,23 +1,22 @@
-import { Component, HostListener, signal, ViewChild } from '@angular/core';
+import { Component, HostListener, signal, viewChild } from '@angular/core';
 import { BaseChartDirective } from 'ng2-charts';
 import { ChartConfiguration, ChartData } from 'chart.js';
 import { IChartData } from '../i-chart-data.dto';
 import { DataFetchService } from '../data-fetch.service';
 import { map } from 'rxjs';
 
 @Component({
-  selector: 'app-age-analysis-line',
-  standalone: true,
-  imports: [BaseChartDirective],
-  templateUrl: './age-analysis-line.component.html',
-  styleUrl: './age-analysis-line.component.scss'
+    selector: 'app-age-analysis-line',
+    imports: [BaseChartDirective],
+    templateUrl: './age-analysis-line.component.html',
+    styleUrl: './age-analysis-line.component.scss'
 })
 export class AgeAnalysisLineComponent {
-  @ViewChild(BaseChartDirective) chart?: BaseChartDirective;
+  readonly chart = viewChild(BaseChartDirective);
 
   @HostListener('window:resize', ['$event.target.innerWidth'])
   onResize() {
-    this.chart?.chart?.resize();
+    this.chart()?.chart?.resize();
   }
 
   public loaded = signal(false);

src/app/angular-logo/angular-logo.component.ts

@@ -1,11 +1,10 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-angular-logo',
-  standalone: true,
-  imports: [],
-  templateUrl: './angular-logo.component.html',
-  styleUrl: './angular-logo.component.scss'
+    selector: 'app-angular-logo',
+    imports: [],
+    templateUrl: './angular-logo.component.html',
+    styleUrl: './angular-logo.component.scss'
 })
 export class AngularLogoComponent {
 

src/app/app.component.ts

@@ -5,16 +5,15 @@ import { FooterComponent } from "./footer/footer.component";
 import { MenuComponent } from './menu/menu.component';
 
 @Component({
-  selector: 'app-root',
-  standalone: true,
-  imports: [
-    CommonModule,
-    RouterOutlet,
-    FooterComponent,
-    MenuComponent
-  ],
-  templateUrl: './app.component.html',
-  styleUrl: './app.component.scss'
+    selector: 'app-root',
+    imports: [
+        CommonModule,
+        RouterOutlet,
+        FooterComponent,
+        MenuComponent
+    ],
+    templateUrl: './app.component.html',
+    styleUrl: './app.component.scss'
 })
 export class AppComponent {
   title = 'cricket-charts';

src/app/ave-strike-multi-axis-line/ave-strike-multi-axis-line.component.ts

@@ -1,23 +1,22 @@
-import { Component, HostListener, OnInit, signal, ViewChild } from '@angular/core';
+import { Component, HostListener, OnInit, signal, viewChild } from '@angular/core';
 import { ChartConfiguration, ChartData } from 'chart.js';
 import { DataFetchService } from '../data-fetch.service';
 import { IChartData } from '../i-chart-data.dto';
 import ChartDataLabels from 'chartjs-plugin-datalabels';
 import { BaseChartDirective } from 'ng2-charts';
 
 @Component({
-  selector: 'app-ave-strike-multi-axis-line',
-  standalone: true,
-  imports: [BaseChartDirective],
-  templateUrl: './ave-strike-multi-axis-line.component.html',
-  styleUrl: './ave-strike-multi-axis-line.component.scss'
+    selector: 'app-ave-strike-multi-axis-line',
+    imports: [BaseChartDirective],
+    templateUrl: './ave-strike-multi-axis-line.component.html',
+    styleUrl: './ave-strike-multi-axis-line.component.scss'
 })
 export class AveStrikeMultiAxisLineComponent implements OnInit {
-  @ViewChild(BaseChartDirective) chart?: BaseChartDirective;
+  readonly chart = viewChild(BaseChartDirective);
 
   @HostListener('window:resize', ['$event.target.innerWidth'])
   onResize() {
-    this.chart?.chart?.resize();
+    this.chart()?.chart?.resize();
   }
 
   public chartPlugins = [ChartDataLabels];

src/app/bowling-ave-tabs/bowling-ave-tabs.component.ts

@@ -5,10 +5,9 @@ import { FormatAnalysisLineComponent } from "../format-analysis-line/format-anal
 import { AgeAnalysisLineComponent } from "../age-analysis-line/age-analysis-line.component";
 
 @Component({
-  selector: 'app-bowling-ave-tabs',
-  standalone: true,
-  imports: [MatTabsModule, CumulativeAveLineComponent, FormatAnalysisLineComponent, AgeAnalysisLineComponent],
-  templateUrl: './bowling-ave-tabs.component.html',
-  styleUrl: './bowling-ave-tabs.component.scss'
+    selector: 'app-bowling-ave-tabs',
+    imports: [MatTabsModule, CumulativeAveLineComponent, FormatAnalysisLineComponent, AgeAnalysisLineComponent],
+    templateUrl: './bowling-ave-tabs.component.html',
+    styleUrl: './bowling-ave-tabs.component.scss'
 })
 export class BowlingAveTabsComponent { }

src/app/charts/charts.component.ts

@@ -8,13 +8,12 @@ import { BowlingAveTabsComponent } from '../bowling-ave-tabs/bowling-ave-tabs.co
 import { YearBarComponent } from '../year-bar/year-bar.component';
 import { InningsBarComponent } from '../innings-bar/innings-bar.component';
 import { AveHomeAwayComponent } from '../home_away/ave-home-away/ave-home-away.component';
-import { HomeAwayTabsComponent } from "../home_away/home-away-tabs/home-away-tabs.component";
-import { HomeGroundsBarComponent } from "../grounds/home-grounds-bar/home-grounds-bar.component";
-import { GroundsTabsComponent } from "../grounds/grounds-tabs/grounds-tabs.component";
+import { HomeAwayTabsComponent } from '../home_away/home-away-tabs/home-away-tabs.component';
+import { HomeGroundsBarComponent } from '../grounds/home-grounds-bar/home-grounds-bar.component';
+import { GroundsTabsComponent } from '../grounds/grounds-tabs/grounds-tabs.component';
 
 @Component({
   selector: 'app-charts',
-  standalone: true,
   imports: [
     EconomyRateComponent,
     StrikeRateComponent,
@@ -25,12 +24,10 @@ import { GroundsTabsComponent } from "../grounds/grounds-tabs/grounds-tabs.compo
     WicketsOpponentBarComponent,
     YearBarComponent,
     InningsBarComponent,
-    AveHomeAwayComponent,
     HomeAwayTabsComponent,
-    HomeGroundsBarComponent,
-    GroundsTabsComponent
-],
+    GroundsTabsComponent,
+  ],
   templateUrl: './charts.component.html',
-  styleUrl: './charts.component.scss'
+  styleUrl: './charts.component.scss',
 })
-export class ChartsComponent { }
+export class ChartsComponent {}

src/app/cumulative-ave-line/cumulative-ave-line.component.ts

@@ -1,22 +1,21 @@
-import { Component, HostListener, signal, ViewChild } from '@angular/core';
+import { Component, HostListener, signal, viewChild } from '@angular/core';
 import { BaseChartDirective } from 'ng2-charts';
 import { ChartConfiguration, ChartData, ChartEvent, ChartType } from 'chart.js';
 import { IChartData } from '../i-chart-data.dto';
 import { DataFetchService } from '../data-fetch.service';
 
 @Component({
-  selector: 'app-cumulative-ave-line',
-  standalone: true,
-  imports: [BaseChartDirective],
-  templateUrl: './cumulative-ave-line.component.html',
-  styleUrl: './cumulative-ave-line.component.scss'
+    selector: 'app-cumulative-ave-line',
+    imports: [BaseChartDirective],
+    templateUrl: './cumulative-ave-line.component.html',
+    styleUrl: './cumulative-ave-line.component.scss'
 })
 export class CumulativeAveLineComponent {
-  @ViewChild(BaseChartDirective) chart?: BaseChartDirective;
+  readonly chart = viewChild(BaseChartDirective);
 
   @HostListener('window:resize', ['$event.target.innerWidth'])
   onResize() {
-    this.chart?.chart?.resize();
+    this.chart()?.chart?.resize();
   }
 
   public loaded = signal(false);

src/app/economy-rate/economy-rate.component.ts

@@ -1,4 +1,4 @@
-import { Component, HostListener, signal, ViewChild } from '@angular/core';
+import { Component, HostListener, signal, viewChild } from '@angular/core';
 import { ChartConfiguration, ChartData } from 'chart.js';
 import { IChartData } from '../i-chart-data.dto';
 import { BaseChartDirective } from 'ng2-charts';
@@ -8,18 +8,17 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatTooltipModule } from '@angular/material/tooltip';
 
 @Component({
-  selector: 'app-economy-rate',
-  standalone: true,
-  imports: [BaseChartDirective, MatButtonModule, MatTooltipModule],
-  templateUrl: './economy-rate.component.html',
-  styleUrl: './economy-rate.component.scss'
+    selector: 'app-economy-rate',
+    imports: [BaseChartDirective, MatButtonModule, MatTooltipModule],
+    templateUrl: './economy-rate.component.html',
+    styleUrl: './economy-rate.component.scss'
 })
 export class EconomyRateComponent {
-  @ViewChild(BaseChartDirective) chart?: BaseChartDirective;
+  readonly chart = viewChild(BaseChartDirective);
 
   @HostListener('window:resize', ['$event.target.innerWidth'])
   onResize() {
-    this.chart?.chart?.resize();
+    this.chart()?.chart?.resize();
   }
 
   public chartPlugins = [ChartDataLabels];

src/app/footer/footer.component.ts

@@ -1,13 +1,9 @@
 import { Component, signal } from '@angular/core';
-// import { MatButtonModule } from '@angular/material/button';
-import { AngularLogoComponent } from '../angular-logo/angular-logo.component';
 
 @Component({
     selector: 'app-footer',
     templateUrl: './footer.component.html',
-    styleUrls: ['./footer.component.scss'],
-    standalone: true,
-    imports: [AngularLogoComponent]
+    styleUrls: ['./footer.component.scss']
 })
 export class FooterComponent {
   public message = signal('');

src/app/format-analysis-line/format-analysis-line.component.ts

@@ -1,22 +1,21 @@
-import { Component, HostListener, signal, ViewChild } from '@angular/core';
+import { Component, HostListener, signal, viewChild } from '@angular/core';
 import { BaseChartDirective } from 'ng2-charts';
 import { ChartConfiguration, ChartData } from 'chart.js';
 import { IChartData } from '../i-chart-data.dto';
 import { DataFetchService } from '../data-fetch.service';
 
 @Component({
-  selector: 'app-format-analysis-line',
-  standalone: true,
-  imports: [BaseChartDirective],
-  templateUrl: './format-analysis-line.component.html',
-  styleUrl: './format-analysis-line.component.scss'
+    selector: 'app-format-analysis-line',
+    imports: [BaseChartDirective],
+    templateUrl: './format-analysis-line.component.html',
+    styleUrl: './format-analysis-line.component.scss'
 })
 export class FormatAnalysisLineComponent {
-  @ViewChild(BaseChartDirective) chart?: BaseChartDirective;
+  readonly chart = viewChild(BaseChartDirective);
 
   @HostListener('window:resize', ['$event.target.innerWidth'])
   onResize() {
-    this.chart?.chart?.resize();
+    this.chart()?.chart?.resize();
   }
 
   public loaded = signal(false);

src/app/grounds/grounds-tabs/grounds-tabs.component.ts

@@ -3,10 +3,9 @@ import { MatTabsModule } from '@angular/material/tabs';
 import { HomeGroundsBarComponent } from "../home-grounds-bar/home-grounds-bar.component";
 
 @Component({
-  selector: 'app-grounds-tabs',
-  standalone: true,
-  imports: [MatTabsModule, HomeGroundsBarComponent],
-  templateUrl: './grounds-tabs.component.html',
-  styleUrl: './grounds-tabs.component.scss'
+    selector: 'app-grounds-tabs',
+    imports: [MatTabsModule, HomeGroundsBarComponent],
+    templateUrl: './grounds-tabs.component.html',
+    styleUrl: './grounds-tabs.component.scss'
 })
 export class GroundsTabsComponent { }

src/app/grounds/home-grounds-bar/home-grounds-bar.component.ts

@@ -1,4 +1,4 @@
-import { Component, HostListener, signal, ViewChild } from '@angular/core';
+import { Component, HostListener, signal, viewChild } from '@angular/core';
 import { ChartConfiguration, ChartData } from 'chart.js';
 import { BaseChartDirective } from 'ng2-charts';
 import ChartDataLabels from 'chartjs-plugin-datalabels';
@@ -9,18 +9,17 @@ import { DataFetchService } from '../../data-fetch.service';
 import { IGroundAnalysisBar } from '../i-ground-analysis-bar';
 
 @Component({
-  selector: 'app-home-grounds-bar',
-  standalone: true,
-  imports: [BaseChartDirective, MatButtonModule, MatIconModule, MatTooltipModule],
-  templateUrl: './home-grounds-bar.component.html',
-  styleUrl: './home-grounds-bar.component.scss'
+    selector: 'app-home-grounds-bar',
+    imports: [BaseChartDirective, MatButtonModule, MatIconModule, MatTooltipModule],
+    templateUrl: './home-grounds-bar.component.html',
+    styleUrl: './home-grounds-bar.component.scss'
 })
 export class HomeGroundsBarComponent {
-  @ViewChild(BaseChartDirective) chart?: BaseChartDirective;
+  readonly chart = viewChild(BaseChartDirective);
 
   @HostListener('window:resize', ['$event.target.innerWidth'])
   onResize() {
-    this.chart?.chart?.resize();
+    this.chart()?.chart?.resize();
   }
 
   public chartPlugins = [ChartDataLabels];
@@ -73,11 +72,11 @@ export class HomeGroundsBarComponent {
   public toggle5w(): void {
     if (this.wicketsData?.datasets[2].hidden) {
       this.wicketsData.datasets[2].hidden = false;
-      this.chart?.update();
+      this.chart()?.update();
       this.btnText.set('Hide 5w');
     } else {
       this.wicketsData.datasets[2].hidden = true;
-      this.chart?.update();
+      this.chart()?.update();
       this.btnText.set('Show 5w');
     }
   }