feat(lib): convert chartCanvas to a signal

libs/ui/src/lib/fire-calculator/fire-calculator.component.ts

@@ -16,8 +16,8 @@ import {
   Input,
   OnChanges,
   OnDestroy,
-  ViewChild,
+  output,
-  output
+  viewChild
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import {
@@ -90,8 +90,6 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy {
   @Input() retirementDate: Date;
   @Input() savingsRate = 0;
 
-  @ViewChild('chartCanvas') chartCanvas: ElementRef<HTMLCanvasElement>;
-
   public calculatorForm = this.formBuilder.group({
     annualInterestRate: new FormControl<number | null>(null),
     paymentPerPeriod: new FormControl<number | null>(null),
@@ -111,6 +109,8 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy {
   protected readonly retirementDateChanged = output<Date>();
   protected readonly savingsRateChanged = output<number>();
 
+  private readonly chartCanvas =
+    viewChild.required<ElementRef<HTMLCanvasElement>>('chartCanvas');
   private readonly CONTRIBUTION_PERIOD = 12;
   private readonly DEFAULT_RETIREMENT_DATE = startOfMonth(
     addYears(new Date(), 10)
@@ -272,7 +272,7 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy {
 
     const chartData = this.getChartData();
 
-    if (this.chartCanvas) {
+    if (this.chartCanvas()) {
       if (this.chart) {
         this.chart.data.labels = chartData.labels;
 
@@ -282,7 +282,7 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy {
 
         this.chart.update();
       } else {
-        this.chart = new Chart<'bar'>(this.chartCanvas.nativeElement, {
+        this.chart = new Chart<'bar'>(this.chartCanvas().nativeElement, {
           data: chartData,
           options: {
             plugins: {