angular component into leaflet popup
this is a working solution:
Create Component
component = this.resolver.resolveComponentFactory(PopupComponent).create(this.injector);
Use NG component as HTML:
component.location.nativeElement
ex:
this.bindPopup(this.component.location.nativeElement);
Where:
- resolver: ComponentFactoryResolver -> from '@angular/core';
- injector: Injector -> from '@angular/core';
Remember to add 'app.module.ts':
entryComponents: [PopupComponent]
EXTRA
Angular must be notified about "change", call:
component.changeDetectorRef.detectChanges()
If you want to use input fields in the popup:
DomEvent.disableClickPropagation(this.component.location.nativeElement);
:)
Here is how i transposed this solution to leaflet.js:
let geojson = L.geoJSON(data, { onEachFeature: (feature, layer) => { let popup = L.popup(); layer.on({ click: () => { this.zone.run( () => { if(this.componentRef){ this.componentRef.destroy(); } const compFactory = this.componentFactoryResolver.resolveComponentFactory(componentDetailmponent); this.componentRef = compFactory.create(this.injector); if (this.appRef['attachView']) { // since 2.3.0 this.appRef['attachView'](this.componentRef.hostView); this.componentRef .onDestroy(() => { this.appRef['detachView'](this.componentRef.hostView); }); } else { this.appRef['registerChangeDetector'](this.componentRef.changeDetectorRef); this.componentRef.onDestroy(() => { this.appRef['unregisterChangeDetector'](this.componentRef.changeDetectorRef); }); } let div = document.createElement('div'); div.appendChild(this.componentRef.location.nativeElement); popup.setContent(div); } ) }});layer.bindPopup(popup);}});