Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

244
Views
Problem with Angular Compiler on Component Input when using inheriting/extending interfaces

I have got a problem with an Input() Variable of an Angular Component. It throws a type related error on the pages template file. I have got two interfaces, one page and one component to make the error occur.

The two interfaces are Bike and BikeMin where Bike extends BikeMin (and other interfaces):

export interface Bike extends BikeRemote, BikeMin, BikeLocal {}

I have got a Component BikeFeaturePickerComponent with an ngModel of type BikeMin:

export class BikeFeaturePickerComponent {
  @Output("bikeChange")
  public bikeChange: EventEmitter<BikeMin> = new EventEmitter<BikeMin>();
  @Input("bike")
  public bike: BikeMin;

  ngOnInit(): void {}

  constructor(public featuresService: FeaturesService, public bikeInfoService: BikeInfoService) {}
}

I am using the Component BikeFeaturePickerComponent on the Page DetailPage which has the public property bike: Bike.
detail.page.ts:

export class DetailPage implements OnInit {
  public bike: Bike;
  ...
}

detail.page.html:

<app-bike-feature-picker [(bike)]="bike"></app-bike-feature-picker>

Now the error occurs on the detail.page.html. It says that I cannot assign the variable of type Bike to a variable of type BikeMin although Bike has all the properties of BikeMin. Inside of functions I can assign variables of type Bike to parameters of type BikeMin. But when using Input() from @angular/core I get the following error: enter image description here

No errors occur at runtime (ionic serve) either. The code can be executed despite the compiler error. Also no errors on ionic build. Possibly the error is only caused by Visual Studio code. But how can I get rid of it?

Thankful for any advice.

over 4 years ago · Santiago Trujillo
2 answers
Answer question

0

As you're using two way binding, the casting of the type is going both up and down i.e. Bike -> BikeMin and BikeMin -> Bike. I'm guessing it's the BikeMin -> Bike that's causing the issue

You may need to use a union type in DetailPage

public bike: Bike | BikeMin;
over 4 years ago · Santiago Trujillo Report

0

Thanks to https://stackoverflow.com/a/70011876/11063209 It works when changing the Output type to the more general type Bike. Because the specific interface BikeMin cannot be castet to the generel Bike interface on the Output:

  @Output("bikeChange")
  public bikeChange: EventEmitter<Bike> = new EventEmitter<Bike>();
  @Input("bike")
  public bike: BikeMin;
over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!