Ole Ole - 3 months ago 29
AngularJS Question

Polymer equivalent to ng-show?

Is the a polymer equivalent for

ng-show
? Here's a snippet example of what I'm trying to convert:

<h1>Greeting</h1>
<div ng-show="authenticated">
<p>The ID is {{controller.greeting.id}}</p>
<p>The content is {{controller.greeting.content}}</p>
</div>
<div ng-show="!authenticated">
<p>Login to see your greeting</p>
</div>

Answer

dom-if is not necessary here. Simply use $= (attribute binding) to add/remove hidden attribute.

<style>
[hidden] {
    display:none;
}
</style>

<h1>Greeting</h1>
<div hidden$=[[!authenticated]]>
    <p>The ID is {{controller.greeting.id}}</p>
    <p>The content is {{controller.greeting.content}}</p>
</div>
<div hidden$=[[authenticated]]>
    <p>Login to see your greeting</p>
</div>

Use dom-if to make decisions about blocks of code that you don't want to be rendered, not just hidden.