1

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.

8
  • 3
    Is this a typo? Because you need to call a signal track().trackTitle. Commented Nov 19 at 16:17
  • 1
    @Sarah please replicate in this stackblitz and share back Commented Nov 19 at 16:30
  • 1
    @Sarah Working demo to compare with your code stackblitz Commented Nov 19 at 17:03
  • 1
    Thanks for sharing the demo @NarenMurali. Actually you and Silvermind are right. I needed to put track()?.trackTitle . Thanks for your help Commented Nov 19 at 17:15
  • 1
    Since you're using input, you have to call it to obtain the value it is holding. Commented Nov 20 at 8:02

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.