From d38062f47e94e7a9cc7242ba48219b3b90d62bf7 Mon Sep 17 00:00:00 2001
From: KenTandrian <kenricktan11@gmail.com>
Date: Sat, 7 Mar 2026 20:08:06 +0700
Subject: [PATCH] feat(lib): convert chartCanvas to a signal

---
 .../lib/fire-calculator/fire-calculator.component.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/libs/ui/src/lib/fire-calculator/fire-calculator.component.ts b/libs/ui/src/lib/fire-calculator/fire-calculator.component.ts
index 83084356d..8a8e0a4ec 100644
--- a/libs/ui/src/lib/fire-calculator/fire-calculator.component.ts
+++ b/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: {