Angular custom components in ngx-leaflet popups

We are switching from google maps to OSM using Leaflet and ngx-leaflet. The issue is we have many templates that use the map-info-window component of google maps, which displays custom popups. I have the leaflet in it's own component in which each component that has a map calls it, passing an array of markers objects containing locations and other info for each marker, I'm passing the popup as a string of HTML. When you click on the marker it is blank. I can use regular html and it works as expected. Is there something I need to do to the HTML to render it as custom components?

(old component) map-google-container.html

<map-info-window>
<div class="project-info" *ngFor="let item of group">
<app-chart-map-popup [item]="item"></app-chart-map-popup>
<app-view-popup [item]="item" [isOpen]="i === infoIdx"></app-view-popup>
</div>
</map-info-window>


(new component) map-osm-container.html

<app-map [locations]="locationGroupedItems"></app-map>


map-osm-container.component.ts

...
private createMarkerInfo (locations){
return locations.map(loc => {
loc[0].info = '<div class="project-info" *ngFor="let item of group">
<app-chart-map-popup [item]="item"></app-chart-map-popup>
<app-view-popup [item]="item" [isOpen]="i === infoIdx"></app-view-popup>
</div>';
return loc;
});
}


map.component.ts

@Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class MapComponent implements OnChanges {
@Input() locations: any[];
...
configureMap(map){
setTimeout(() => {
this.locations.forEach(loc => {

const myMarker = L.marker([loc[0].latitude,loc[0].longitude], markerOptions);
myMarker.bindPopup(loc[0].info);
this.markers.addLayer(myMarker);
}
map.addLayer(this.markers);
});

}, 0);
}
}


I have tried passing in the HTML string but it doesn't render. What should I do to render the Angular components?

Continue reading...