Polymer change the icon in paper-icon-button onclick

Question

Using Polymer 1.0

I'm trying to change an paper-icon-button's (Polymer) icon on click. Can't get it working.

I've done this so far.

<paper-icon-button class="expandComments"  
 icon="{{isCollapsed? 'expand-more' : 'expand-less'}}" on-click="expanding">
</paper-icon-button>

'expand-more and 'expand-less' is the icons i want to use.

Created function:

created: function() {
  this.isCollapsed = true;
},

Expanding function:

 expanding: function() {
  var content = this.$.review_item_content;
  if(content.classList.contains('review-item-content')) {
    this.isCollapsed = false;
    content.classList.remove('review-item-content');
  }else{
    this.isCollapsed = true;
    content.classList.add('review-item-content');
  }
},

it gets to the expanding function and changing the value of isCollapsed and removes the style class.

Now I've also tried this one:

<paper-icon-button class="expandComments" icon="{{expandIcon}}" on-click="expanding"></paper-icon-button>


icon: {
  expandIcon: 'expand-more',
},

created: function() {
this.isCollapsed = true;
},

expanding: function() {
  var content = this.$.review_item_content;  

  if(content.classList.contains('review-item-content')) {
    this.icon.expandIcon = 'expand-less';
    this.isCollapsed = false;
    content.classList.remove('review-item-content');
  }else{
    this.icon.expandIcon = 'expand-more';
    this.isCollapsed = true;
    content.classList.add('review-item-content');
  }
},

Scarygami · Accepted Answer · 2015-06-15T10:34:06.547

2

Expressions like x ? y : z aren't (yet) supported in Polymer 1.0

You will need to use a computed binding instead, something like:

icon="{{_icon(isCollapsed)}}"


Polymer({
 properties: {
   isCollapsed: {
     type: Boolean,
     value: true
   }
 },
  _icon: function (isCollapsed) {
    return isCollapsed ? 'icon1' : 'icon2'
  }
});

Changing the value of isCollapsed will then re-evaluate the function automatically and set the icon value accordingly.

Edit: since _icon won't be called as long is isCollapsed is undefined, you would have to initialise it with a default value (see the properties object in the edited code above).

edited Jun 15 '15 at 10:34

answered Jun 12 '15 at 12:08

Scarygami

15,009
2
35
24

Thank you very much! One problem, the icon dosen't show before I press it. – Jonathan Andersson Jun 12 '15 at 13:09
Try initializing `isCollapsed` within the `ready` event (not within `created`). – idleherb Jun 12 '15 at 15:02
Already tried that, dosen't work. The created callback is always called before ready and I think I want it done as sone as possible. – Jonathan Andersson Jun 12 '15 at 16:14
@Scarygami I really don't want them to bring back the ternary operator. It's so easy to abuse. – Neil John Ramal Jun 13 '15 at 08:21
@JonathanAndersson - I've edited my reply to include a way to initialise the value of isCollapsed without depending on life-cycle callbacks. – Scarygami Jun 15 '15 at 10:35
Thanks! How would one adapt this to work in multiple instances? – Rhys Sep 29 '16 at 01:45

score 0 · Answer 2 · edited May 23 '17 at 11:53

After the solution posted by Scarygami, there was still an problem. isCollapsed was still undefined even if it was set in created and therefor the icon image wasn't loaded on start.

Solution: Polymer global variables

 <paper-icon-button class="expandComments" icon="{{_icon(isCollapsed)}}" on-click="expanding"></paper-icon-button>

<script>

(function() {
 var isCollapsed = true;

 Polymer({

  is: 'edit-review',

  properties: {
  reviews: Object
  },

  _icon: function (isCollapsed) {
  return isCollapsed ? 'expand-more' : 'expand-less';
  },

  ready: function() {
   this.isCollapsed = isCollapsed;
  },

  expanding: function() {
   var content = this.$.review_item_content;
   if(content.classList.contains('review-item-content')) {
    this.isCollapsed = false;
    }else{
    this.isCollapsed = true;
   }
  },
});
})();
</script>

Anderssson What is 'review-item-content content' in the line if(classList.contains('review-item-content')). I am getting an error on this line as Uncaught TypeError: Cannot read property 'classList' of undefined. — Mukesh Joshi, Dec 19 '16 at 11:37

Polymer change the icon in paper-icon-button onclick

2 Answers2