Display user tag in google maps infowindow angular2

Question

map.component.ts code:

......
infoWindow = new google.maps.InfoWindow(
{
    content: `<custom-tag></custom-tag>`    //***not displaying anything***
});
infoWindow.open(map, marker);
......

map.component.html code:

<custom-tag></custom-tag>      <!--***displays hi***-->
<div class="google-maps"></div>

custom-tag.component.html code:

<h2>hi</h2>

There are no errors in the module.ts, routing.ts files. The infoindust simply opens and does not display anything. Please help me figure out why the information does not show anything.

Answer 1

You must dynamically create components using ComponentFactoryResolver

const compFactory = this.resolver.resolveComponentFactory(CustomTag);
this.compRef = compFactory.create(this.injector);

this.appRef.attachView(this.compRef.hostView);

let div = document.createElement('div');
div.appendChild(this.compRef.location.nativeElement);

this.infoWindow.setContent(div);
this.infoWindow.open(this.map, marker);

Here is an example of a plunger

Remember to add the component CustomTagtoentryComponents