Conditional rendering

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

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