feat: Refactor investment data handling to use signals for reactive updates in components

Author: aimxnaim

04-essentials-practice/src/app/app.component.html

@@ -1,3 +1,3 @@
 <app-header></app-header>
 <app-user-input (calculate)="onCalculate($event)"></app-user-input>
-<app-investment-results [annualData]="annualData"></app-investment-results>
+<app-investment-results [annualData]="annualData()"></app-investment-results>

04-essentials-practice/src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, signal } from '@angular/core';
 import { HeaderComponent } from './header/header.component';
 import { UserInputComponent } from "./user-input/user-input.component";
 import { investmentData, UserInput } from './user-input/user-input.interface';
@@ -17,13 +17,13 @@ import { InvestmentResultsComponent } from "./investment-results/investment-resu
 })
 
 export class AppComponent {
-  annualData?: investmentData[]
+  annualData = signal<investmentData[] | undefined>(undefined);
 
   constructor(
     protected userInputService: UserInputService
   ) { }
 
   onCalculate(data: UserInput) {
-    this.annualData = this.userInputService.calculateInvestmentResults(data);
+    this.annualData.set(this.userInputService.calculateInvestmentResults(data));
   }
 }

04-essentials-practice/src/app/investment-results/investment-results.component.html

@@ -1,4 +1,4 @@
-@if (!annualData) {
+@if (!annualData()) {
     <p class="center">Please enter some values and press "Calculate".</p>
 } @else {
     <table>
@@ -12,7 +12,7 @@
             </tr>
         </thead>
         <tbody>
-            <tr *ngFor="let data of annualData">
+            <tr *ngFor="let data of annualData()">
                 <td>{{ data.year }}</td>
                 <td>{{ data.valueEndOfYear | currency:'MYR':true }}</td>
                 <td>{{ data.interest | currency:'MYR':true }}</td>

04-essentials-practice/src/app/investment-results/investment-results.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, input } from '@angular/core';
 import { investmentData } from '../user-input/user-input.interface';
 import { CommonModule } from '@angular/common';
 
@@ -12,5 +12,5 @@ import { CommonModule } from '@angular/common';
   styleUrl: './investment-results.component.css'
 })
 export class InvestmentResultsComponent {
-  @Input() annualData?: investmentData[];
+  annualData = input<investmentData[] | undefined>(undefined)
 }

04-essentials-practice/src/app/user-input/user-input.component.ts

@@ -1,6 +1,5 @@
-import { Component, EventEmitter, Output } from '@angular/core';
+import { Component, output, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { UserInputService } from './user-input.service';
 import { UserInput } from './user-input.interface';
 
 @Component({
@@ -13,18 +12,23 @@ import { UserInput } from './user-input.interface';
   styleUrl: './user-input.component.css'
 })
 export class UserInputComponent {
-  initialInvestment : string = '';
-  annualInvestment : string = '';
-  expectedReturn : string = '';
-  duration : string = '';
-  @Output() calculate = new EventEmitter<UserInput>();
+  initialInvestment = signal<string>('');
+  annualInvestment = signal<string>('');
+  expectedReturn = signal<string>('');
+  duration = signal<string>('');
+  calculate = output<UserInput>();
 
   onSubmit() {
     this.calculate.emit({
-      initialInvestment: +this.initialInvestment,
-      annualInvestment: +this.annualInvestment,
-      expectedReturn: +this.expectedReturn,
-      duration: +this.duration
+      initialInvestment: +this.initialInvestment(),
+      annualInvestment: +this.annualInvestment(),
+      expectedReturn: +this.expectedReturn(),
+      duration: +this.duration()
     })
+
+    this.initialInvestment.set('');
+    this.annualInvestment.set('');
+    this.expectedReturn.set('');
+    this.duration.set('');
   }
 }