0

I have problem to fit my pushpin custom template into angular component.

My component:

import { Component, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss']
})
export class MapComponent implements, AfterViewInit {
    @ViewChild('myMap') myMap;

    map: any;
    infoboxClick;
    infoboxTemplate = `<div id="infoboxText" class="custom-infobox">
                          <span class ="close-sighn" onclick="closeCustomInfoBox()">x</span>
                          {description}
                      </div>`;

    constructor(private dataService: MapService) {
    }

    ngAfterViewInit() {
        this.getMap();
    }


    getMap() {

        if ((window as any).Microsoft && (window as any).Microsoft.Maps) {
            this.map = new (window as any).Microsoft.Maps.Map(document.getElementById('mapId'), {
                credentials: ''
            });

            var pushpin = new (window as any).Microsoft.Maps.Pushpin(map.getCenter(), null);
            (window as any).Microsoft.Maps.Events.addHandler(pushpin, 'click', (args) => {
                        this.infoboxClick.setOptions({
                            location: args.target.getLocation(),
                            htmlContent: this.infoboxTemplate.replace('{description}', 'Some test description'),
                            visible: true
                        });
                    });


            map.entities.push(pushpin);

        } else {
            setTimeout(() => { this.getMap() }, 1000);
        }    
    }

  closeCustomInfoBox() {
    this.infoboxClick.setOptions({
        visible: false
    });
  }

}

My view:

<div #myMap id="mapId" class="map-container"></div>

In infoboxTemplate I have function 'closeCustomInfoBox()', which should close infobox.

1) How I can call that function from my angular component?

2) I need to get proper angular scope if I call it how I can get approach to my 'infoboxClick' variables?

Milos
  • 1,678
  • 4
  • 23
  • 49
  • Do you need a custom infobox? You can simply added HTML into the description of the infobox and it will render. – rbrundritt Aug 28 '17 at 17:06

1 Answers1

0

If you mean you want to access closeCustomInfoBox() function and infoboxClick variable from the parent component.

Check this https://angular.io/guide/component-interaction#parent-interacts-with-child-via-local-variable

dwij
  • 694
  • 8
  • 17
  • I updated my question with view representation. Can you please put more detail in your answer. I do not have parent child component, everything is one component. I do not know how BingMap represent this template inside and how to fit it in my example. – Milos Aug 28 '17 at 11:32
  • Btw check this https://stackoverflow.com/questions/37550278/how-to-add-bing-maps-v8-to-angular-2-0 Is that what you want? – dwij Aug 28 '17 at 12:47
  • Thanks. I already checked it :). It is about how to add map generally, there is no example how to use custom pushpin templates. – Milos Aug 28 '17 at 13:22