My configurator object declaration is as follows.
export class Config {
constructor(public index: number, public junk: string[] = []) { }
public count() : number { return this.junk.length; }
}
After declaring it, I pass it into the input decorated field of my components like this (@Input() config : Config;).
<div *ngFor="let thing of stuff; let config={index:index,junk:junk};">
<app-thingy [data]="thing"
[config]="config">
</app-thingy>
</div>
Even though I can access this.config in ngOnChanges() and see the values that I've set, the method is not accessible. Additionally, any additional parameters in the constructor or public fields in the class are not recognized either. Only the explicitly assigned HTML markup fields are available.
ngOnChanges(changes: SimpleChanges): void {
if (changes.config) {
//console.log((new Config()).count());
console.log((this.config.count()));
}
}
An error occurs when trying to call the method on the object directly. However, casting it using this.config as Config leads to the same result.
It seems that the object passed from the HTML markup may not be typed as Config, hence lacking any methods/variables not explicitly assigned. Is there a way to make the computer recognize the class and its convenience methods without resorting to hacky solutions?
The potential solution I envision involves constructing an internal Config object by copying the fields from the passed-in object and binding the HTML interpolators to that instead. However, this approach feels somewhat clumsy and possibly flawed...