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>
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>
<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-componentproducts="[{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>
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>
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 isdisplayed.' : '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>
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>