CODEWITHSUNDEEP
angularjspolymer
Simon Green
Simon Green

Reputation: 1161

Two-way angular binding for selected polymer paper-tab

I'm trying to use the Polymer paper-tabs component in an Angular app. I have the markup like:

<paper-tabs noink selected="0">
   <paper-tab class="tab1" data-ng-click="currentTab='tab1'">Tab1</paper-tab>
   <paper-tab class="tab2" data-ng-click="currentTab='tab2'">Tab2</paper-tab>
</paper-tabs>

I want to be able to bind the selected paper-tab to an angular scope field, such that if I update the scope field, the markup re-renders to select the new tab that is somehow associated with the scope field's new value.

Is this possible? It seems that the only way to configure which tab is selected is via the selected attribte on paper-tabs. But if you programmatically update this value during the life of the page (either via jQuery or via an angular binding), then it doesn't cause the tabs to re-render with the new tab selected.

Upvotes: 2

Views: 1189

Answers (2)

user1665238
user1665238

Reputation: 21

If You looking solution for "standard Polymer paper elements".

Try ng-polymer-elements

AngularJS two-way binding for Web Components, whit support for Polymer Core and Paper elements

Just tested for me, and works great, in your case use:

<paper-tabs noink ng-model="currentTab">

link: https://gabiaxel.github.io/ng-polymer-elements/

Upvotes: 1

Oliver
Oliver

Reputation: 36403

It looks like you are using the standard Polymer paper elements. As far as I know these webcomponents don't play that nicely with AngularJS and hence the Angular Material project was created

To do what you need the Angular Material should look like, from the example:

<md-tabs selected="selectedIndex">
  <md-tab ng-repeat="tab in tabs | orderBy:predicate:reversed" on-select="onTabSelected(tab)" on-deselect="announceDeselected(tab)" disabled="tab.disabled">
      <md-tab-label>
          {{tab.title}}
      </md-tab-label>
      {{tab.content}}
  </md-tab>
</md-tabs>

Upvotes: 1

Related Questions