Currently, I am working on a rather intricate component loader project in Angular, and my goal is to dynamically retrieve the component instance from an rxjs store.
loadEditAreaComponent(component: any, componentInstanceData?: {}){
const componentFactory = this.cfr.resolveComponentFactory(component);
const viewContainerRef = this.editAreaHost.viewContainerRef;
const componentRef = viewContainerRef.createComponent(componentFactory);
Object.keys(componentInstanceData).forEach(key => {
componentRef.instance[key] = componentInstanceData[key];
})
While it does function, I can't shake off the feeling that using any may not be the best approach. Unfortunately, I haven't been able to determine the correct type to use.
The signature of resolveComponentFactory reads as follows:
(method) ComponentFactoryResolver.resolveComponentFactory<unknown>(component: Type<unknown>): ComponentFactory<unknown>When I input component: Type, the error message states:
Argument of type 'Type' is not assignable to parameter of type 'Type<unknown>'.And when I try component: Type<unknown> or Type<any>, another error pops up:
Type 'Type' is not generic.
I would greatly appreciate some guidance on this matter, along with a deeper understanding of the Typescript constraints that seem to be eluding me.
Thank you!