2

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.

Community
  • 1
  • 1
byteSamurai
  • 52
  • 9

1 Answers1

0

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;
}
Abris
  • 1,451
  • 3
  • 18
  • 38
  • I read about this. But according to [this comments](http://stackoverflow.com/questions/32693061/angular-2-typescript-get-hold-of-an-element-in-the-template#answer-32693892) I thought it has been removed. But I never tried it with an Inject annotation, so I will test it. Thx for your response. – byteSamurai Dec 01 '15 at 12:54
  • Yeah, I read that too but I can't find anything about it in the Changelog that says it no longer is supported. – Abris Dec 01 '15 at 15:04
  • okay... i played a bit with it, but as far as I see, this ist currently the best, we can do. So thx 4 your help – byteSamurai Dec 04 '15 at 14:54