Passing Data

On the page

Before we access data through a component, we have to pass it from a page. We can pass data how we would in a normal HTML page: attributes!.

<!-- index.xtml -->

<etcher-button 
    type="primary" 
    text="Click me!"
></etcher-button>

Interpolation

Great, that’s working. Now how would we receive data from that page via our component?, we do this through interpolation. Etcher will replace the {{...}} with the value of the property you provide in a page.

<!-- button.xtml -->

<button class="{{type}}">
    {{text}}
</button>

<!-- will render as -->

<button class="primary">
    Click me!
</button>

Learn more about Interpolation.