Using Polymer components in Angular 2

We have some great news for all Angular 2 users out there! While working on providing a seamless Angular 2 integration to Vaadin Elements, we ended up building a universal Polymer to Angular 2 adapter that allows you to use any Polymer Element in your Angular 2 application. This means that in addition to all Vaadin Elements, you are able to use any Polymer Element or other Polymer based web component out there in Angular 2.

The @vaadin/angular2-polymer directive takes care of defining the needed inputs and outputs as well as adding support for ngControl and ngForm, allowing Polymer components to behave like any other Angular 2 component. The directive will also handle all shadow DOM operations within templates.

Using the @vaadin/angular2-polymer directive

After installing the directive and any Polymer elements you want to use, you can include the components in your app by including PolymerElement('element-name') in your component's directives.

demo.component.ts

import { Component } from '@angular/core';
import { PolymerElement } from '@vaadin/angular2-polymer';

@Component({
  moduleId: module.id,
  selector: 'demo-app',
  templateUrl: 'demo.component.html',
  directives: [
    PolymerElement('vaadin-grid')
  ]
})
export class DemoAppComponent {
  people: Person[] = [
    {
      firstName: 'John',
      lastName: 'Doe',
      email: 'john@company.com'
    },{
      firstName: 'Jane',
      lastName: 'Doe',
      email: 'jane@company.com'
    }];
}

demo.component.html

  <vaadin-grid [items]="people">
    <table>
      <colgroup>
        <col name="firstName">
        <col name="lastName">
        <col name="email">
      </colgroup>
    </table>
  </vaadin-grid>

Getting started

Excited to try out the beta? Check out our Angular 2 Polymer quickstart tutorial and tutorial video, then head over to the Vaadin Elements catalog to explore all the new components available to you.

If you find something that doesn't seem right, help us out by filing a ticket on the angular2-polymer GitHub page.

Further reading that might interest you:

Learn more about Vaadin Elements UI components for building great web apps

html:<script charset="utf-8" src="https://js.hscta.net/cta/current.js"></script>

html:<script type="text/javascript"> hbspt.cta.load(1840687, 'd6edc50d-7d21-49db-815b-6a6f29cb42b5', {}); </script>