Using Angular 2 Two-way Data Binding with Polymer

Question

I am trying to combine Polymer elements with Angular 2, and I am struggling with the two-way aspect of data binding.

As an example, I use paper tabs and show the tab number that is currently in use. Whenever I change a tab, I want this change to occur in the tabNr field in the AppComponent as well. Whenever I click on the displayed tab number, I want the number to change and change the tab accordingly. My initial approach was as follows:

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: `
                <paper-toolbar>
                    <paper-tabs [(selected)]="tabNr">
                        <paper-tab>Tab 1</paper-tab>
                        <paper-tab>Tab 2</paper-tab>
                        <paper-tab>Tab 3</paper-tab>
                    </paper-tabs>
                </paper-toolbar>
                <paper-toolbar>
                    <div (click)="traverse()">Tab {{tabNr + 1}}</div>
                </paper-toolbar>
                `
})
export class AppComponent {
    tabNr = 0;

    traverse() {
        this.tabNr = (this.tabNr + 1) % 3;
    }

}

. . , , . , , :

<paper-tabs [(selected)]="tabNr">

, ( , AppComponent)

<paper-tabs (selected)="tabNr">

. , Polymer :

<paper-tabs selected="tabNr" (selected-changed)="tabNr=$event.detail.value">

Angular 2 . , , , Angular 2.

, :

<paper-tabs [attr.selected]="tabNr">

<paper-tabs [attr.selected]="tabNr" (selected-changed)="tabNr=$event.detail.value">

, :

: 'tabNr AppComponent @2: 17' . : '1'. : '1' [tabNr in AppComponent @2: 17]

, , , - . , (-), , , , , [() ] .

, : , ?

Answer 1

-

<paper-tabs [attr.selected]="tabNr" (selected-changed)="updateTab($event)">

<paper-tabs attr.selected="{{tabNr}}" (selected-changed)="updateTab($event)">

", ", event.detail.value number.

<paper-tabs [(selected)]="tabNr">

selectedChange selected-changed, 1 .