I'm getting this TypeScript error: [NG2].It seems like a type incompatibility issue. Can...

I am working on an Angular standalone component where a parent component (AppComponent) passes investment data to a child component (InvestmentResultsComponent). However, I am getting the following TypeScript error: Application bundle generation failed. [0.110 seconds]

X [ERROR] NG2: Type '{ year: number; interest: number; valueEndOfYear: number; annualInvestment: number; totalIntrest: number; totalAmountInvested: number; }[] | undefined' is not assignable to type '{ year: number; intrest: number; valueEndOfYear: number; annualInvestment: number; totalIntrest: number; totalAmountInvested: number; }[] | undefined'. Type '{ year: number; interest: number; valueEndOfYear: number; annualInvestment: number; totalIntrest: number; totalAmountInvested: number; }[]' is not assignable to type '{ year: number; intrest: number; valueEndOfYear: number; annualInvestment: number; totalIntrest: number; totalAmountInvested: number; }[]'. Property 'intrest' is missing in type '{ year: number; interest: number; valueEndOfYear: number; annualInvestment: number; totalIntrest: number; totalAmountInvested: number; }' but required in type '{ year: number; intrest: number; valueEndOfYear: number; annualInvestment: number; totalIntrest: number; totalAmountInvested: number; }'. [plugin angular-compiler]

src/app/app.component.html:3:25:
3 │ <app-investment-results [result]="resultsData"/>
╵ ~~~~~~


Error occurs in the template of component AppComponent.

src/app/app.component.ts:12:15:
12 │ templateUrl: './app.component.html',
╵ ~~~~~~~~~~~~~~~~~~~~~~


this is the following code: Parent Component app.component.ts

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { HeaderComponent } from "./header/header.component";
import { UserInputComponent } from "./user-input/user-input.component";
import type { UserInputModel } from './user-input.model';
import { InvestmentResultsComponent } from "./investment-results/investment-
results.component";

@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet, HeaderComponent, UserInputComponent,
InvestmentResultsComponent],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
resultsData?: {year: number;
interest: number;
valueEndOfYear: number;
annualInvestment: number;
totalIntrest: number;
totalAmountInvested: number;}[];
onCalculateInvestmentResults(data: UserInputModel){
const{initialInvestment, duration, expectedReturn, annualInvestment} = data;
const annualData = [];
let investmentValue = initialInvestment;

for(let i = 0; i< duration; i++){
const year = i + 1;
const interestEarnedInYear = investmentValue * (expectedReturn / 100);
investmentValue += interestEarnedInYear + annualInvestment;
const totalInterest = investmentValue - annualInvestment * year - initialInvestment;
annualData.push({
year: year,
interest: interestEarnedInYear,
valueEndOfYear: investmentValue,
annualInvestment: annualInvestment,
totalIntrest: totalInterest,
totalAmountInvested:initialInvestment + annualInvestment * year,
});
}
this.resultsData = annualData;


} }

child component investment-results.component.ts

import { Component, Input } from '@angular/core';

@Component({
selector: 'app-investment-results',
standalone: true,
imports: [],
templateUrl: './investment-results.component.html',
styleUrl: './investment-results.component.css'
})
export class InvestmentResultsComponent {
@Input() result?: {
year: number;
intrest: number;
valueEndOfYear: number;
annualInvestment: number;
totalIntrest: number;
totalAmountInvested:number;
}[];
}


template app.component.html

<app-investment-results [result]="resultsData"/>


what have I tried

1. 
   Checked my types: I verified that resultsData is an array, but result in the child component expects a single object.
   
   
2. 
   Tried passing only the first element of the array:
   
   <app-investment-results [result]="resultsData?.[0]"/> (even this doesnt avoid error in the template.)
   
   
3. 
   Changed the child component’s input to accept an array:
   
   @Input() result?: { year: number; intrest: number; valueEndOfYear: number; annualInvestment: number; totalIntrest: number; totalAmountInvested: number; }[];
   

(still doesnt change the error in template.)

• What kind of TypeScript error is this?
• Is there a better way to fix it than modifying the @Input() type?
• Should the parent or child component be adjusted to correctly handle the data?

Continue reading...