angular component into leaflet popup

Question

can't figure out how to generate a component into a leaflet popup. I've tried two things:

First, integrate the component selector into the html but it looks as if angular does not compile it:

    let my geojson = L.geoJSON(data, {
        onEachFeature: (feature, layer) => {
            let popup = L.popup().setContent('<app-component-detail></app-component-detail>');
            layer.on({
                click: () => {
                    layer.bindPopup(popup);
                }
            })
        }
    }).addTo(map);

When i click on a point on the map, the popup is empty.

Then i considered using "resolveComponentFactory" to generate the component into a ViewContainerRef. It works well if i call an element of my view with @ViewChild:

Template:

<div #myContainer></div>

logic:

@ViewChild('myContainer', { read: ViewContainerRef } ) myContainer: ViewContainerRef;
private generatedComponent= this.componentFactoryResolver.resolveComponentFactory(componentDetail);
let my geojson = L.geoJSON(data, {
    onEachFeature: (feature, layer) => {
        layer.on({
            click: () => {
                this.myContainer.createComponent(this.generatedComponent);
            }
        })
    }
}).addTo(map);

Now i would like to generate my component directly into a popup. I think i need to set a ViewContainerRef into the content of my popup. Something like that:

@ViewChild('popup', { read: ViewContainerRef } ) popup: ViewContainerRef;
private generatedComponent= this.componentFactoryResolver.resolveComponentFactory(componentDetail);
let my geojson = L.geoJSON(data, {
    onEachFeature: (feature, layer) => {
        let popup = L.popup().setContent('<div #popup></div>');
        layer.on({
            click: () => {
                layer.bindPopup(popup);
                this.popup.createComponent(this.generatedComponent);
            }
        })
    }
}).addTo(map);

EDIT: Here is how i transposed this solution to leaflet.js

    let geojson = L.geoJSON(data, {
  style: () => defaultStyle,
  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);
  }
});

Check this http://stackoverflow.com/questions/40922224/angular2-component-into-dynamicaly-created-element — yurzui, Feb 20 '17 at 08:59
Thank you for the link. I've tried to transpose it to leaflet, see edit post — Nico Dv, Feb 20 '17 at 11:07
Did you forget about `this.appRef.attachView(this.compRef.hostView);`? it's crucial — yurzui, Feb 20 '17 at 11:18
More simple way: https://stackoverflow.com/questions/43460579/angular-2-leaflet-map-how-to-link-to-a-component-from-marker-popup-rout — Yurii Bratchuk, Nov 13 '17 at 16:53

score 8 · Answer 1 · answered Dec 26 '19 at 09:01

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

:)

How can I pass my @Inputs as arguments? – Miguel Carvalhais Matos May 29 '20 at 18:17 — Miguel Carvalhais Matos, May 29 '20 at 18:17

score 3 · Answer 2 · edited Sep 22 '20 at 12:42

3

@miguel-de-matos

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

edited Sep 22 '20 at 12:42

Vivek Jain

2,730
6
12
27

answered Sep 22 '20 at 11:28

r.valeev

39
1

score 2 · Answer 3 · edited May 23 '17 at 12:09

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

angular component into leaflet popup

3 Answers3

Linked