I want to add a component into a elementref as a child and have access to it's properties.
const element: HTMLElement = document.createElement('div');
element.innerHTML = // Component needs to be added here
// Need to have access to properties of the Component here
I have added a Full Calendar to my project and for the timeline i need to add custom resource Elements. For this i only get access to the HTMLElement and some data. So What i want to do is pass an intialised component to the HTMLElement.
Right now my only option is writing the html as the string and passing it to the innerHTML. Is there a better Option?
In one of my projects, I achieved something similar to your requirement this way. Let me know if it helps?
constructor(private componentFactoryResolver: ComponentFactoryResolver,
private injector: Injector,
private appRef: ApplicationRef) {
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent); // Your dynamic component will replace DynamicComponent
const componentRef = componentFactory.create(this.injector);
this.appRef.attachView(componentRef.hostView);
const domElem = (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
const element: HTMLElement = document.createElement('div');
element.appendChild(domElem); // Component needs to be added here
document.body.appendChild(element);
}
This way you will have reference to your dynamic component as componentRef
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With