CODEWITHSUNDEEP
javascriptjquerygoogle-mapspolymer-1.0angular
byteSamurai
byteSamurai

Reputation: 62

How to call Polymer element methods in Angular2?

I'm playing with Angular2 and Polymer (I know that Angular is currently alpha).

Main Target:

Build a small App which displays my current position in Gmap using Angular2 and Polymer.

Current BabyStep

Move Coordinates in ViewModel/Component with setInterval.

Problem

I tried to use the Gmap element from Polymer inside an Angular view. Binding works perfectly, but the map is not refreshing. I read, that I have to call the refresh() method from the google-map element API. This brought me to the following:

@Component({
    selector: 'my-app',
})
@View({
    templateUrl: '/templates/map.html'
})
export class MapComponent {
    lat: number;
    lng: number;

    constructor() {
        this.lat = 27.859862;
        this.lng = 13.112473;
        this.goToleft();
    }

    goToleft() {
        setInterval(() => {
            this.lng -= 0.00001;
            document.querySelector("#gmap").resize();
        }, 100)
    }
}

map.html:

<link rel="import" href="../bower_components/google-map/google-map.html" >
<link rel="import" href="../bower_components/google-map/google-map-marker.html" >
[...]
<google-map id="gmap" show-center-marker libraries="places" latitude="{{lat}}" longitude="{{lng}}" disable-zoom fit-to-markers disable-default-ui zoom="18" >
    <google-map-marker longitude="{{lng}}" latitude="{{lat}}" id="google_map_marker" title="Go Giants!" draggable="true">    </google-map-marker>
</google-map>

To be honest: document.querySelector("#gmap").resize(); is dirty. In my understanding, the component in Angular2 works like a ViewModel, kind of like the controllers in Angular1. Therefore a ViewModel should not directly access a DOM element. But I got no better solution, yet.

What I tried to use ElementRef injection, but its not supported any more.

Could anybody give me a hint? I feel, like I missed something.

Upvotes: 2

Views: 731

Answers (1)

Abris
Abris

Reputation: 1481

I'm using Angular2 alpha 46 and have the following constructor that injects the ElementRef into a component. I agree with you that this doesn't seem like the best solution but I have not seen any other way yet. 

constructor( 
  @Inject(ElementRef) elementRef: ElementRef
) {
  this.map = elementRef.nativeElement.querySelector("XXX");
  this.refreshMap = this.map.refresh;
}

Upvotes: 0

Related Questions