0

I ask a question that it has been answered already here, but I think my particular case make things a little bit more complicated. Here's the thing.

I'm using Angular2 and I'm creating several components (component to display a Card, Carousel, tooltip..ecc..). Each component has its own tag that I use to place it inside my templates file. Everything is ok. Here an example:

@Component({
selector: 'app-card',
templateUrl: './tb-card.component.html',
styleUrls: ['./tb-card.component.css']
})
export class CardComponent {
    @Input() image: string;
    @Input() title: string;
    @Input() subtitle: string;
}

Now. I have a Google Map and everytime a user clicks on the map, I want to display a popup inside this map. The content of this popup should be an angular component, so I do this (using the API of the map).

 map.popup().setLatLng([pos.lat, pos.lng])
  .setContent('<app-card title="this is a title" subtitle="this is asubtitle"></app-card>');

Of course, the app-card tag is not processed by the angular engine. The same problem happens if I just append an app-card component with jquery.

I saw other questions similar to this one that says that I should use a ComponentResolver (How can I inject an AngularJS 2 component dynamically in JQuery?)

The problem is: that example start with the idea that there is a "main" component (called Dynamic component) that it is already inside the DOM and I should use this component as a "bridge" to inject other components. But I don't have it (I'm inside a Google Map). Unless I put this component somewhere on my page and I do detach and attach in the map, but I don't really like this trick.

Did anyone have my same problem? Thank you so much to everyone who will help me! :)

syciphj
  • 986
  • 5
  • 11
simonelucidi87
  • 301
  • 1
  • 10
  • Is this a leaflet concern? the code you posted seems to be the leaflet popup function. – syciphj Nov 07 '17 at 04:10
  • Hi henrisycip, thanks for your answer! Yes, it is leaflet. But here the problem is not Google Map or leaflet. As I wrote, you can easily reproduce the problem just using jquery and appending an element dynamically inside the DOM. – simonelucidi87 Nov 07 '17 at 19:55
  • 1
    https://stackoverflow.com/questions/40922224/angular2-component-into-dynamicaly-created-element/40926110#40926110 – yurzui Nov 08 '17 at 06:46
  • Thank you so much @yurzui !! It seems exactly what I was looking for! I'll give it a try and I'll let you know! :) – simonelucidi87 Nov 08 '17 at 22:24
  • @yurzui It worked like a charm! Thank you so much! If you answer the question I would be glad to accept it! – simonelucidi87 Nov 09 '17 at 23:14

0 Answers0