Conditionals and Loops

Logic directives control rendering right in the markup. A conditional picks one branch, and a loop repeats a block for each item in a list. They work in pages and components, and combine with Expressions for dynamic values.

Conditional branches

Use le-if for the main condition, then le-else-if and le-else as fallbacks. le-else is a plain attribute with no value.

<script>
  const role = 'editor';
</script>

<section le-if="{role === 'admin'}">Admin panel</section>
<section le-else-if="{role === 'editor'}">Editor panel</section>
<section le-else>Viewer panel</section>

Loops with le-each

Use le-each to repeat an element for each item in an array, naming the item and, optionally, the index.

<script>
  const plans = ['Starter', 'Pro', 'Scale'];
</script>

<li le-each="{plans as plan, i}">{i + 1}. {plan}</li>

Here plan and i belong to each iteration and work in text, attributes and nested expressions.

Filter while looping

With le-each and le-if on the same element, the loop runs first and the condition is checked for each item. This example renders only active users.

<script>
  const users = [
    { name: 'Alice', active: true },
    { name: 'Bob', active: false },
  ];
</script>

<p le-each="{users as user}" le-if="{user.active}">{user.name}</p>

Directive reference

Good to know

• A conditional chain is a run of consecutive sibling elements. A regular element in the middle ends the chain.
• le-each expects an array. Any other value renders nothing.
• Directives are resolved at render time and never appear in the final HTML.

Next steps