Angular 20 Error: Property 'trackTitle' does not exist on type 'InputSignal<Track>'

I'm getting the following error in my Angular 20 app when using "input".

"Property 'trackTitle' does not exist on type 'InputSignal<Track>'"

I was wondering does anyone know the reason for this error and can you help me solve this?

Here's some details about my project:

I'm passing data to a modal component.

The data is in the following format:

{"trackID":20004,"trackTitle":"Electronica Tune"}

I have an interface called "Track" to represent this track object

track.ts:

export interface Track {
trackID?: number,
trackTitle?: string
}


I first created this project with Angular 17 and now I am updating it to Angular 20.

In my Angular 17 project I was using the @Input decorator to pass the data as follows:

(Note: This code is working also in Angular 20 without errors however I would prefer to update my code to use the new "input" of Angular 20)

modal-content.ts:

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

export class ModalContent {
//Both of the following solutions work without any errors in Angular 20
@Input() protected track: Track = {};
@Input() protected track!: Track;

}


Here is my new modal-content.ts code using input (in Angular 20) which is producing the error:

import { Component, input } from '@angular/core';
import { Track } from '../track';

export class ModalContent {
//The following line produces the error
//"Property 'trackTitle' does not exist on type 'InputSignal<Track>'"
track = input<Track>();


//So I tried to give "track" an initial value as follows however
//it produces the same error:
track = input<Track>({});
}


modal-content.html

<div class="modal-body">
<table style="width:100%">
<tr>
<th>Track Title:</th>
<td>{{ track.trackTitle }}</td>
<!--I also tried track?.trackTitle but it didn't solve the error-->
</tr>
</table>
</div>


I also tried:

track = input<any>();


but the error is still the same.

Continue reading...