angular component into leaflet popup angular component into leaflet popup angular angular

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);}});


@miguel-de-matos

 const component = this.resolver.resolveComponentFactory(MyComponent).create(this.injector); component.instance.title = 'Super Title'; component.changeDetectorRef.detectChanges();