¿Cómo agregar un componente en un elementref?

Quiero agregar un componente en un elementref como hijo y tener acceso a sus propiedades.

const element: HTMLElement = document.createElement('div');

element.innerHTML = // Component needs to be added here

// Need to have access to properties of the Component here

He agregado un calendario completo a mi proyecto y para la línea de tiempo necesito agregar elementos de recursos personalizados. Para esto solo tengo acceso al elemento HTMLE y algunos datos. Entonces, lo que quiero hacer es pasar un componente inicializado al elemento HTMLE.

En este momento, mi única opción es escribir el html como la cadena y pasarlo al innerHTML. ¿Hay alguna opción mejor?

En uno de mis proyectos, logré algo similar a su requerimiento de esta manera. Avísame si te ayuda

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);
}

De esta manera tendrá referencia a su componente dinámico como componentRef

Es posible que pueda usar Renderer2

export class AppComponent { 
@ViewChild('addButton') 
  private animateThis: ElementRef;  
  constructor(private renderer: Renderer2) {}

  addBtn() {
    const button = this.renderer.createElement('button'); 
    const buttonText = this.renderer.createText('This is a button');
    this.renderer.appendChild(button, buttonText);
    this.renderer.appendChild(this.animateThis.nativeElement, button);
  }
}

Más ejemplos

La documentación angular dice

Los elementos angulares son componentes angulares empaquetados como elementos personalizados (también llamados componentes web)

Por lo tanto, puede crear el elemento que desea agregar usando

1. document.createElement('elementName')si es un elemento personalizado autónomo , o
2. document.createElement('baseElementName', {is: 'elementName'})si es un elemento incorporado personalizado .

Puede insertar el elemento que creó en un containerelemento utilizando container.insertAdjacentElement(position, element)como se explica aquí .

import { AfterContentInit, Component, ElementRef } from '@angular/core';

@Component({
    selector: 'app-root',
    template: `
    <h1>My App</h1>
    <pre>
      <code>{{ node }}</code>
    </pre>
  `
})
export class AppComponent implements AfterContentInit {
  node: string;

  constructor(private elementRef: ElementRef) { }

  ngAfterContentInit() {
    const tmp = document.createElement('div');
    const el = this.elementRef.nativeElement.cloneNode(true);

    tmp.appendChild(el);
    this.node = tmp.innerHTML;
  }

}

dado que el componente está registrado en window.customElements,
y de acuerdo con la documentación de Angular probablemente lo sea,
podría hacer lo siguiente:

var element = document.createElement("div");

var comp= document.createElement("your-component")
/*
optionally set component attributes or anything else
you also have access to the component's properties here
comp.setAttribute("name",value)
console.log(comp.exampleProperty)
*/
element.appendChild(comp)

Lo que intenta lograr es imposible y va en contra de las mejores prácticas. En su lugar, debe mostrar ese componente con condiciones. Puede crear una variable en servicio y, en función de ese valor, el componente se puede mostrar o enlazar.