rx-if

<rx-if
  condition="$.condition$"
  true="templateReferenceTrue"
  false="templateReferenceFalse"
></rx-if>

Short syntax:

<tag-mame *if="$.condition$">
  ...content
</tag-mame>

This is used to display conditionally an element or a node.

Under the hoods, it creates a virtual Node which:

• subscribes to $.condition$
• and injects templateReferenceTrue if it received true
• or injects templateReferenceFalse if it received false

note

The previously injected template is always removed from the DOM before the new one is appended.

It has the following attributes:

• condition: the reactive value of type boolean to listen to
• true: the name of the template to inject if condition emitted true
• false: the name of the template to inject if condition emitted false

You may omit one of the template. In this case, if the value matches the omitted template, the previous child nodes are removed and not replaced. So it will result in nothing displayed, until the value changes for the other template.

It's converted to something similar to this:

new VirtualReactiveIfNode(
  $.condition$,
  templateReferenceTrue,
  templateReferenceFalse,
).attach(parentNode);

Example

<div *if="single(true)">
  Hello world !
</div>

Output:

<div>
  Hello world !
</div>

---

Example file

Alternative syntaxes

Using *if

<tag-mame
  *if="$.condition$"
  ...otherAttributes
>
  ...content
</tag-mame>

Which is equivalent to

<rx-template
  name="uuid"
>
  <tag-mame
    ...otherAttributes
  >
    ...content
  </tag-mame>
</rx-template>

<rx-if
  condition="$.condition$"
  true="uuid"
></rx-if>

Using rx-if-true and rx-if-false with in-place template

<rx-if
  condition="$.condition$"
>
  <rx-if-true>
    ...trueContent
  </rx-if-true>
  <rx-if-false>
    ...falseContent
  </rx-if-false>
</rx-if>

Using *if-true and *if-false

<rx-if
  condition="$.condition$"
>
  <tag-mame-true
    *if-true
    ...otherAttributesTrue
  >
    ...contentTrue
  </tag-mame-true>
  <tag-mame-false
    *if-false
    ...otherAttributesFalse
  >
    ...contentFalse
  </tag-mame-false>
</rx-if>