styling paper-icon-button cannot change the css styles dynamically

Sai Roshan Chhetri

unread,

Jul 25, 2015, 5:14:13 AM7/25/15

to Polymer

I am trying to hide the paper-icon-button and want the button hidden while the page is loaded. I have following code written on polymer1.0. and this does not seem to hide the button.

Kindly help and let me know where am I missing?

<!doctype html>

<html>
	<head>
		<title>Test Home</title>

		<meta charset="utf-8">


		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">

		<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
		<link rel="import" href="bower_components/iron-icons/iron-icons.html">
		<style>
		</style>
	</head>

	<body>
		<template is="dom-bind" id="t">

			<paper-toolbar id="header">
				<paper-icon-button icon="arrow-back" style="display:{{displayArrow}}" alt="arrow-back" title="arrow-back" on-click="onBackPress"></paper-icon-button>
				
				<h3>TestPage</h3>
			</paper-toolbar>

			

		</template>

		<script>
			var template = document.querySelector('#t');
			template.displayArrow='none'
						
		</script>

	</body>
</html>

Sai Roshan Chhetri

unread,

Jul 26, 2015, 3:31:52 AM7/26/15

to Polymer, rosunc...@gmail.com

Reply if possible

Eric Bidelman

unread,

Jul 28, 2015, 6:15:59 PM7/28/15

to Sai Roshan Chhetri, Polymer

Hi Sai,

In 1.0, expressions are not supported in data binding {{}}. You'll need to use computed property instead: https://www.polymer-project.org/1.0/docs/migration.html#data-binding

style="display:{{displayArrow}}"

needs to be something like

style="{{computeDisplayArrow(displayArrow)}}"

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/0eaea8d7-c03a-4d74-bafc-0b2b878cd31f%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Reply all

Reply to author

Forward