0



Linkedin

This post explain how to use a polymer webcomponent in an Angular2 app. We use the google maps component as an example.

For instructions on the demo app, see the bottom of this post.

The files of the demo application: demoApp

Getting started

Open the files of the demo app in your favorite editor and get started! We start of with an app that if you run it just displays hello world in the browser

.

To use polymer we need to add the polymer webcomponent references in the index.html



When using polymer in Angular2 you need to fully enable shadowDOM. This will allow us to use angular data binding on the polymer element

Add this at after the scripts which import the libraries (and before the Angular2 script)

We want to use the google map webcomponent so we import it to the index html, below the polymer script



Now we go to app.ts, where you will see the template, this is the template of the component.

Replace the “Hello world” with the google map webcomponent and use the coordinates of AMIS for the center.





It looks a bit dull though, lets add a marker to the map to show the exact location of AMIS!

For this we need to add the google marker webcomponent to index.html. We can add it below the google map marker that we already imported.



Now add the marker with the same longitude and latitude into the google map component in our app.ts.

We will set the title of the marker to AMIS. So if we hover on the marker, it will show us AMIS.





Data binding

Pretty neat right! But didn’t I say we can use data binding? So lets do that!

Change the template to use data binding for the latitude, longitude and title.



Set the default latitude, longitude and title in the constructor of the class of our angular component.

class GoogleMaps { lat:string; long:string; title:string; constructor(){ this.lat="52.0355031" this.long="5.0978835" this.title="AMIS"; } }

Handling events

Data binding makes it way easier to change the values by for example clicking on a button

In the next steps we will make a button that changes the coordinates from AMIS to San Fransisco.

Of course, since we are using polymer webcomponents anyway, let’s use the paper button for that.

Go to the index.html and import the polymer paper-button.

Add the button to the template in app.ts



Notice we use the angular2 event binding by using (click)=”switch()”

Now add a switch() function to the class.

When we click the button and we are watching the location of AMIS we want to switch to San Fransisco and vice versa.

class GoogleMaps { lat:string; long:string; title:string; constructor(){ this.lat="52.0355031" this.long="5.0978835" this.title="AMIS"; } switch(){ if(this.title=="AMIS"){ this.lat="37.779" this.long="-122.3892" this.title="San Fransisco!";} else{ this.lat="52.0355031" this.long="5.0978835" this.title="AMIS"; } }



That’s it! We can now switch between places by pressing the button.

If you want your map to be more interactive, for example: people should be able to click the marker. We can bind the events of the polymer component. When we look at the documentation of the Google Map Component, we can see we have to set click-event to true to be able to handle events. Also there is a google-map-marker-click event that we can use.

We add a new function to our class to handle our marker event. For now it will just call the switch function.

class GoogleMaps { lat:string; long:string; title:string; constructor(){ this.lat="52.0355031" this.long="5.0978835" this.title="AMIS"; } clickedMarker(){ this.switch(); } switch(){ if(this.title=="AMIS"){ this.lat="37.779" this.long="-122.3892" this.title="San Fransisco!";} else{ this.lat="52.0355031" this.long="5.0978835" this.title="AMIS"; } }

In the google-map-marker component we can bind the event from the marker to this function by adding it to the template and setting click events to true.

That’s how easy it is!

We now know how to use polymer webcomponents and their custom events in our angular2 application!

Demo app instructions

The demo app requires typescript, bower and npm.

The demo file has two projects:

helloWorldApp: starting point if you want to follow this tutorial

finishedApp: app with the google map polymer component already implemented

To run an app go to the folder (e.g. helloWorldApp) with the command line terminal.

The first time you have to install the dependencies with npm install and bower install.

To compile the app use: tsc (or tsc -w to keep watching)

To run the app use: npm run serve

Sources:

The files of the demo application: demoApp

Polymer google webcomponents

Polymer GoogleMaps documentation

Angular2 quickstart

Polymer