Como adicionar um componente a um elementref?

Eu quero adicionar um componente em um elementref como um filho e ter acesso a suas propriedades.

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

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

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

Adicionei um calendário completo ao meu projeto e, para a linha do tempo, preciso adicionar elementos de recursos personalizados. Para isso, só tenho acesso ao HTMLElement e alguns dados. Então, o que eu quero fazer é passar um componente inicializado para o HTMLElement.

No momento, minha única opção é escrever o html como string e passá-lo para o innerHTML. Existe uma opção melhor?

Em um dos meus projetos, consegui algo semelhante à sua exigência dessa maneira. Deixe-me saber se isso ajuda?

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

Dessa forma, você terá referência ao seu componente dinâmico como componentRef

Você pode usar o 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);
  }
}

Mais exemplos

A documentação Angular diz

Elementos angulares são componentes angulares empacotados como elementos personalizados (também chamados de Web Components)

Assim, você pode criar o elemento que deseja adicionar usando

1. document.createElement('elementName')se for um elemento personalizado autônomo ou
2. document.createElement('baseElementName', {is: 'elementName'})se for um elemento interno personalizado .

Você pode inserir o elemento criado em um containerelemento, container.insertAdjacentElement(position, element)conforme explicado aqui .

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

}

considerando que o componente está registrado em window.customElements
e , de acordo com a documentação do Angular, provavelmente,
você pode:

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)

O que você está tentando alcançar é impossível e contra as melhores práticas. Em vez disso, você deve mostrar esse componente com condições. Você pode criar variável em serviço e, com base nesse valor, o componente pode ser mostrado ou em loop.