I'm facing an issue with an Input() Variable in an Angular Component. The problem lies in a type-related error that occurs in the template file of the page. To reproduce the error, I have two interfaces named Bike and BikeMin, where Bike extends BikeMin as well as other interfaces:
export interface Bike extends BikeRemote, BikeMin, BikeLocal {}
Within the Component BikeFeaturePickerComponent, there is an ngModel defined as 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 utilizing the BikeFeaturePickerComponent within the DetailPage. The DetailPage contains a 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>
The error arises on the detail.page.html indicating that it's not possible to assign a variable of type Bike to a variable of type BikeMin, despite Bike having all the properties of BikeMin. Interestingly, assigning variables of type Bike to parameters of type BikeMin works fine within functions. However, when using Input() from @angular/core, the following error pops up:
https://i.sstatic.net/TrBr0.png
No runtime errors occur (with `ionic serve`). The code can still be executed even with the compiler error present. Furthermore, there are no issues during `ionic build`. It seems like the error is specific to Visual Studio Code. How can this error be resolved?
Any advice on tackling this issue would be greatly appreciated.