Angular google maps custom HTML infoWindow

Question

I am using google-maps angular component (https://github.com/angular/components/blob/master/src/google-maps/README.md). I have an array of markers and i want to show infoWindow with custom HTML in it. Now my question is how to show the custom HTML inside my infoWindows.

So far i have the window showing done, the only problem is it displays normal string, not HTML content. my component.html looks like:

<map-marker #markerElem="mapMarker"
    *ngFor="let marker of markersArray"
    [options]="marker"
    (mapClick)="openInfo(markerElem, marker.info)"
>
</map-marker>

<map-info-window>{{ infoContent }}</map-info-window>

And in my component.ts:

@ViewChild(MapInfoWindow) infoWindow: MapInfoWindow;

infoContent: string;

openInfo(marker: MapMarker, content: string) {
    this.infoContent = content;
    this.infoWindow.open(marker);
}

How can i have my infoWindow displaying SOME TEKST instead of <h2>SOME TEKST</h2> ?

Answer 1

You should be using innerHTML or outerHTML binding in this case:

<map-info-window>
  <div [innerHTML]="infoContent"></div>
</map-info-window>

or

<map-info-window>
  <div [outerHTML]="infoContent"></div>
</map-info-window>

The difference between them is former will keep <div> wrapper while latter won't.