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.
track().trackTitle.input, you have to call it to obtain the value it is holding.