Interpolation

Interpolation is a way to render data from a number of sources into a component.

This is done though the {{}} template syntax.

Component Props

Component props are the most common way to pass data into a component. The data is passed from a page to a component by setting the matching attribute on the component tag.

<!-- page.xtml -->
<etcher-component name="my-component" value="hello world" />

<!-- component.xtml -->
<label for="my-input">{{name}}</label>
<input id="my-input" type="text" value="{{value}}" />

Conditional Values

With certain Control Flow directives, data is provided to the elements witing the directive.

{@for item in items}
    <div>{{item}}</div> <!-- `item` will be the current item in the array of items -->
{/}

{@loop 4}
    <div>{{index}}</div> <!-- `index` will be the index of the current loop -->
{/}

Script Tags

Data can be passed to a component through it’s script tag.

Component props can also be pased to script tags by prefixing the attribute with $.

<script>
    const name = "John Doe";

    const age = $age;
</script>

<div>{{name}}</div>