angular - reference html of another component from typescript

Question

I am implementing mapQuest into my angular project. The map is working fine and also popups are showing however I have an issue with accessing another component HTML file. I managed to resolve it somewhat but I don't think it the right solution.

On the popup, I want to display another component where I have a table. I also need to provide input.

Example:

Parent html:

<div id="map" style="height: -webkit-fill-available; width: -webkit-fill-available;">       
     </div> 

   <app-basicInfo [input]="testInput"></app-basicInfo>  

This app-basicInfo should not be in HTML file. At the moment if I delete this then its the popup is not working.

Parent typescript - problem: here on bindPopup I want to show the child component.

   L.marker([35.7392, -104.9903], {
      icon: L.mapquest.icons.marker(),
      draggable: false
    }).bindPopup(this.child.getHtmlContent()).addTo(this.map); <-- here

My question in general would be how to achieve something like this:

bindPopup( "<app-basicInfo [input]="testInput"></app-basicInfo>" )

Child:

<app-table style="width: 100%;" [dataSource]="dataSource" [displayedColumns]="displayedColumns">
<ng-content></ng-content>
</app-table>

Child TS:

  constructor(elRef: ElementRef) {
    this.elRef = elRef;
   }
  getHtmlContent() {
    return this.elRef.nativeElement.innerHTML;
  }

I cannot find an answer and I have read a lot of documentation. I would appreciate even some reference to some file where something like this is resolved.

Answer 1

Based on https://github.com/Asymmetrik/ngx-leaflet/issues/178 I managed to resolve it.

First I installed angular/elements.

Added this to my sharedModule:

export class SharedModuleModule {
  constructor(private injector: Injector) {
    const PopupElement = createCustomElement(BasicInfoComponent, {injector});
    // Register the custom element with the browser.
    customElements.define('popup-element', PopupElement);
  }
 }

And implemented the marked calling my basic info component:

L.marker([35.7392, -104.9903], {
      icon: L.mapquest.icons.marker(),
      draggable: false
    }).addTo(this.map).bindPopup(fl => {
      const popupEl: NgElement & WithProperties<BasicInfoComponent> = document.createElement('popup-element') as any;
      popupEl.message="test";
      popupEl.addEventListener('closed', () => document.body.removeChild(popupEl));
      document.body.appendChild(popupEl);
      return popupEl;
    })

Answer 2

I'm on the dev team at MapQuest. Would you be able to post more of the code, or link to a GitHub repo where I could test it out? That would help me greatly in experimenting with some fixes for you.

In the meantime, give this a shot (referenced from here) -

 L.marker([35.7392, -104.9903], {
  icon: L.mapquest.icons.marker(),
  draggable: false
}).bindPopup( "<app-basicInfo [input]="testInput"></app-basicInfo>" ).openPopup()

I'm sure you've probably already tried this, or something similar, just trying to hunt down some potentially easy solutions for you until I have more context on the code.