Conditional rendering

Components support conditional rendering.

my-first-componentcomponent
<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:

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

The output is:

my-emailemail [output]
<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.

my-first-componentcomponent
<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:

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

The output is:

my-emailemail [output]
<html>
<body>
A simple email
This is an elseif
</body>
</html>

Another Example

my-first-componentcomponent
<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>
my-emailemail
<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:

my-emailemail [output]
<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:

conditional-componentcomponent
<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>
my-emailemail
<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:

my-emailemail [output]
<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>
conditional-componentcomponent
<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:

my-emailemail [output]
<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.

conditional-componentcomponent
<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:

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

The output source becomes:

my-emailemail [output]
<html>
<head></head>
<body>
<h1> Let's play a guessing game </h1>
Pretty close!
</body>
</html>