CODEWITHSUNDEEP
leafletangular2-templateangular2-directivesangular-leaflet-directive
Claudio Pomo
Claudio Pomo

Reputation: 2472

angular 2 Leaflet dynamic binding on popup

I'm newbie on angular2. I've a map with some maker and I'm able to bind into popup content a static html code 

L.marker([long, lat], {
                  icon: L.icon({ iconUrl: 'assets/marker-icon.png', shadowUrl: 'assets/marker-shadow.png' })
                }).bindPopup(HTMLCONTENT).addTo(this.map);

I would insert into my HTMLCONTENT a dynamic content in order to use *ngFor, (click) or other angular facilities, so I've build a new angular component like in the following lines

markerlink.componentes.ts

import {Component, Input} from '@angular/core';
import 'rxjs/add/operator/map';

@Component({
  selector: 'app-marker-link',
  templateUrl: './markerlink.template.html'
})
export class MarkerLinkComponent {

  @Input()
  points: any[] = [];

}

markerlink.template.html

<div *ngFor="let single of points">
  <a href="{{single.url}}">{{single.name}}</a>
</div>

At compile time all works fine and a map with all markers is generated when I go to index but when I click on one of them I see an empty popup.

Maybe there is an incorrect configuration or there is another way to do this?

Upvotes: 2

Views: 1063

Answers (1)

Karun
Karun

Reputation: 304

seems to be a typo of "HTMLCONTENT" in your code below 

L.marker([long, lat], {
              icon: L.icon({ iconUrl: 'assets/marker-icon.png', shadowUrl: 'assets/marker-shadow.png' })
            }).bindPopup(HTMLCONTETN).addTo(this.map);

Upvotes: 0

Related Questions