Search code examples
amp-html

Bind an amp-state's initial value

I want to initialise an amp-state as follows:

<amp-state id="tabs">
  <script type="application/json">
  {
    "selected": "latest"
  }
  </script>
</amp-state>

Then have this initialised value shown on first page request:

<p [text]="tabs.selected"><p>

This doesn't work. The contents of the p tag are only updated when there is a state change. Eg from a button:

<button on="tap:AMP.setState({tabs: {selected: 'top'}})">Press me</button>

I would like elements on the page to reflect the initialised state before further user interaction.

Codepen: https://codepen.io/powlo/pen/VMpVRm/?editors=1000

Solution

  • amp-bind expressions are not evaluated on page load. This is intentional to avoid layout jumps on page load. If you want to dynamically initialize elements on page load, you need to use the amp-list extension (even if it is only a single element).