Conditional rendering

Conditional rendering allows you to show or hide content based on a condition.

Legacy Components
You are reading the legacy components documentation. Please refer to the new documentation for the latest components.

Components support conditional rendering.

<component>
  <div if="false">This only shows if true</div>
  <div elseif="true">This is an elseif</div>
  <div else>This won't show because it isn't true</div>
</component>

Use this component in an email:

<html>
  <body>
    A simple email
    <my-first-component>
  </body>
</html>

The output is:

<html>
  <body>
    A simple email
    <div>This is an elseif</div>
  </body>
</html>

Fragments

If you don't want extra <div> tags for each conditional, use <fragment> instead.

<component>
  <fragment if="false"> This only shows if true </fragment>
  <fragment elseif="true"> This is an elseif </fragment>
  <fragment else> This won't show because it isn't true </fragment>
</component>

Use this component in an email:

<html>
  <body>
    A simple email
    <my-first-component>
  </body>
</html>

The output is:

<html>
  <body>
    A simple email This is an elseif
  </body>
</html>

Another Example

<fieldset>
  <fieldset name="products" , type="list">
    <input type="text" name="name" />
    <input type="text" name="price" />
  </fieldset>
</fieldset>


<component>
  <ul>
    <fragment foreach="product in products">
      <li if="product.price<2">${product.name} - $${product.price}</li>
    </fragment>
  </ul>
</component>
<html>
  <head></head>
  <body>
    <h1>Products less than $2</h1>
    <my-first-component
      products="[{name:'apple', price:'0.50'},{name:'banana', price:'0.75'},{name:'tomato',price:'3.00'},{name:'pie',price:'8.00'}]"
    >
    </my-first-component>
  </body>
</html>

The output source becomes:

<html>
  <head></head>
  <body>
    <h1>Products less than $2</h1>
    <ul>
      <li>apple - $0.50</li>
      <li>banana - $0.75</li>
    </ul>
  </body>
</html>

Complex Conditionals

Let's explore a new component called conditional-component:

<fieldset>
  <input type="radio" name="variant" value="primary" checked />
  <input type="radio" name="variant" value="secondary" />
  <input type="radio" name="variant" value="outline" />
</fieldset>
<component>
  Variant: ${variant}


  <div if="variant==='primary'">Pay attention to me</div>
  <div elseif="variant==='secondary'">Maybe attention to me</div>
  <div else>Probably don't pay attention to me</div>
</component>
<html>
  <head></head>
  <body>
    <h1>Conditional Components</h1>
    <conditional-component variant="secondary"></conditional-component>
  </body>
</html>

The radio type input restricts the valid inputs to one of the set of values.

The output source becomes:

<html>
  <head></head>
  <body>
    <h1>Conditional Components</h1>
    Variant: secondary


    <div>Maybe attention to me</div>
  </body>
</html>

Ternary Expressions

You can use ternary expressions within conditionals.

<component>
  ${conditionToEvaluate ? whatToDoIfTrue : whatToDoIfFalse}
</component>
<fieldset>
  <input type="radio" name="variant" value="primary" checked />
  <input type="radio" name="variant" value="secondary" />
  <input type="radio" name="variant" value="outline" />
</fieldset>
<component>
  ${variant === 'primary' ? 'If the variant is primary, this message is
  displayed.' : 'If not, this is displayed.'}
</component>

The output source for this component with the same base email is:

<html>
  <head></head>
  <body>
    <h1>Conditional Components</h1>
    If not, this is displayed.
  </body>
</html>

Nested Ternary Expressions

You can nest ternary expressions for more complex conditionals.

<fieldset>
  <input type="number" name="luckyguess" />
</fieldset>


<component>
  ${luckyguess === 25 ? 'Correct!' : luckyguess > 50 ? 'That guess is too high!'
  : luckyguess < 15 ? 'That guess is too low!' : 'Pretty close!'}
</component>

Use this component in a simple base email:

<html>
  <head></head>
  <body>
    <h1>Let's play a guessing game</h1>
    <conditional-component luckyguess="26"></conditional-component>
  </body>
</html>

The output source becomes:

<html>
  <head></head>
  <body>
    <h1>Let's play a guessing game</h1>
    Pretty close!
  </body>
</html>
Previous ArticleNext Article