CODEWITHSUNDEEP
angularjspolymerpolymer-1.0
Ole
Ole

Reputation: 47068

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>

Upvotes: 3

Views: 900

Answers (3)

Rahul
Rahul

Reputation: 5636

True and False will work once you add template with in template. I tried

   <template>
    <template is="dom-if" if="{{authenticated}}">
        {{authenticated}}
        <p>The ID is {{controller.greeting.id}}</p>
        <p>The content is {{controller.greeting.content}}</p>
     </template>

    <template is="dom-if" if="{{!authenticated}}">
        {{authenticated}}
        <p>Login to see your greeting</p>
     </template>
    </template>

If you will not add template with in template True, false will never work. It will always show you the first template wheather you have True or False value of properties.

Hope it works.

Upvotes: 0

ZuzEL
ZuzEL

Reputation: 13655

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.

Upvotes: 3

Pankaj Parkar
Pankaj Parkar

Reputation: 136174

I guess you could use dom-if to conditionally keep required HTML in DOM tree. properties should be defined there in properties of component.

<template is="dom-if" if="{{authenticated}}">
   <p>The ID is {{controller.greeting.id}}</p>
   <p>The content is {{controller.greeting.content}}</p>
</template>
<template is="dom-if" if="{{!authenticated}}">
   <p>Login to see your greeting</p>
</template>

Upvotes: 1

Related Questions