Exploring dynamic components in Angular has been quite interesting for me. However, I've encountered a roadblock that I'm unsure how to overcome.
This is the interface I am working with:
export interface InjectableComponent{
setData(data: any): void;
}
Here's a class that implements this interface:
export class DemoComponent implements InjectableComponent {
setData(data: any): void {
}
}
Below is a function that uses the interface as an argument type:
openComponent(component: InjectableComponent, data: any) {
let componentFactory = this.componentFactoryResolver.resolveComponentFactory(<any>component);
this.placeholder.clear();
let componentRef = this.placeholder.createComponent(componentFactory);
(<InjectableComponent>componentRef.instance).setData(data);
}
When calling the function, I encounter an error:
openComponent(DemoComponent, null); <-- ERROR
The error message states:
Argument of type 'typeof DemoComponent' is not assignable to parameter of type 'InjectableComponent'.
Property 'setData' is missing in type 'typeof DemoComponent'.
If someone could shed some light on why this isn't working and suggest a workaround, it would be greatly appreciated.