Conditionals and Loops

Lediv uses logic directives to control rendering directly in template markup.

Conditionals select one branch from multiple options, while loops repeat the same block for each item in a collection. This removes duplicated markup and keeps templates easier to read as content changes.

The same syntax works in pages and components, and combines naturally with Expressions for dynamic values.

Conditional branches

Use le-if for the main condition, then add le-else-if and le-else as fallbacks.

<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>

le-else is used as a plain attribute, without any expression value.

Loops with le-each

Use le-each to repeat one element for each item in an array. Both item and index variables can be declared inline.

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

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

In this example, plan and i are local to each iteration and can be used in text, attributes, and nested expressions.

Filter while looping

When le-each and le-if are used on the same element, the loop runs first and the condition is evaluated for each item.

<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>

The output includes only active users.

Directive reference

Good to know

Conditional chains should stay as consecutive sibling elements. If a regular element is inserted in the middle, the fallback chain ends there.

le-each expects an array expression. If the expression resolves to another type, no repeated items are rendered.

Logic directives are resolved at render time and are not included in final output HTML.

For expression syntax and scope details, continue with Expressions.

Next steps