CODEWITHSUNDEEP
polymerangularpolymer-1.0
martin
martin

Reputation: 96889

Generating Polymer element's content with Angular2

I'm trying to use Polymer element <paper-tabs> in combination with Angular2 like:

<paper-tabs>
    <paper-tab *ngFor="#tab of tabs">{{ tab }}</paper-tab>
</paper-tabs>

From Angular's perspective this is correct but it completely breaks the Polymer element.

It's probably because I'm modifying elements inner content that is placed inside paper-tabs using <content> tag.

See plnkr.co demo
(note: it requires disabled browser CORS because it links paper-tabs.html directly from elements.polymer-project.org).

In the demo there're are two <paper-tabs>. First one is controller by Angular2. If you press "add tab" button several times it adds them to the menu until you press any of the tabs. Then they disappear and you can't add any more tabs. The second menu is 'vanilla' Polymer which is outside Angular and works fine.

I've used Polymer elements with Angular2 before. For example <google-chart> works well because I had to pass variable from Angular to the element. This was easy since I could set element's attribute directly.

<!-- somewhere in a component's template -->
<google-chart #chart></google-chart>

Then somewhere in component's implementation:

var options = {
    'legend': {
        'position': 'none'
    },
    'chartArea': {
        'width': '80%',
        'height': '75%',
        'left': '15%',
        'top': '5%'
    }
};

// grab the <google-chart> element
var elm = this._viewManager.getNamedElementInComponentView(this._elementRef, 'chart').nativeElement;
elm.options = this.options;
elm.type = 'line';

The same attitude works also for binding events which is nicely explained in this video "Componentize your app with Polymer Elements" from AngularU by Rob Dodson.

However, using <paper-tabs> is different and I have no idea how to use it. The same problem's going to be with any Polymer element that relies on its inner HTML content that you want to modify by Angular2.

Upvotes: 0

Views: 387

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657348

For the <content> tag to work you need to enable shadow DOM and load full polyfills (webcomponents.js not webcomponents-lite.js) on browsers that don't fully support shadow DOM.

See also https://www.polymer-project.org/1.0/docs/devguide/settings.html

Upvotes: 1

Related Questions