Geek Answers Handbook

Polymer elements in angular 2 component

I have a set of custom polymer elements that I would like to use in an angular 2 application.

There seems to be a problem with the content tag of the polymer element. The content of the element is displayed in the wrong place inside the polymer element if the element is in the angular 2 component.

Example:

The template for my "my-button" polymer element looks like this:

<template> <button> <content></content> </button> </template>

Use external angular

When I use this element outside of my angular 2 component, I get the result that I expected:

Using:

 <my-button>Foo</my-button>

Result:

 <my-button> <button> Foo </button> <my-button>

Use as part of angular 2 component

When used in an angular 2 component, content is always displayed at the end of the element template. Just as the content tag does not exist.

Using:

 <my-button>Foo</my-button>

Result:

 <my-button> <button> </button> "Foo" <my-button>

Question

The problem may be that polymer and angular 2 use a content tag to redirect. So maybe everything gets a little messy when you use both together.

I would like to use all my polymeric elements inside angular 2. Therefore any ideas on how to fix this would be greatly appreciated.

+7
javascript html angular polymer web-component
source share
2 answers

There are several open-ended questions about Angular2 in conjunction with Polymer. For example, Angular does not use Polymer.dom(el)... to control the children of polymer elements. This is probably what destroys your components. The workaround is to enable full shadow DOM and polyfills. See https://www.polymer-project.org/1.0/docs/devguide/settings.html

A problem that I have not yet found a solution goes through <template> (as, for example, required for <iron-list> . Angular processes the templates on its own and does not pass it to the Polymer element.

There is a ngNonBindable directive. I haven't tried this on <template ngNonBindable> yet, but it might work. I tried, it seems that only ignore the bindings [prop]="field" / prop="{{field}} .

Another problem is with <style is="custom-style"> . They can only be added to the <head> element or inside Polymer elements, but not to Angular components.

See also Bilateral Binding in Angular 2 with NgModel and Changing a Bound Property?

+8
source share

Give up on https://www.npmjs.com/package/@vaadin/angular2-polymer , which should solve most of the problems when integrating polymer elements into Angular 2.

User Guide: https://github.com/vaadin/vaadin-core-elements/blob/master/docs/angular2.adoc

Tutorial (draft): https://github.com/vaadin/angular2-polymer/blob/d4581e8fd82841eea84ef40e16e262a12ee4b082/docs/tutorial.adoc

The best shadow DOM support expects merging from a separate branch (should be merged and released within two weeks): https://github.com/vaadin/angular2-polymer/tree/feature/polymer-dom-adapter

It would be great if you could try and see if this works for you!

In the end, the documentation will be published at https://vaadin.com/docs/

+7
source share

More articles:


All Articles