Dynamic Content After User-Interaction

Edit on Github
Open in Playground

Dynamic content after User-Interaction

This is a sample showing how to show dynamic content after an user interaction: the product availability will be shown based on product selection.

Setup

Additionally used AMP components must be imported in the header. We use amp-bind to dynamically update the page content.

<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

How to get dynamic content

By using amp-bind and amp-state, a user can get up-to-date data after an interaction. The approach is to use amp-bind with a JSON endpoint.

Example

Please select a product
  <amp-state id="products"
    src="https://ampbyexample.com/json/products.json"></amp-state>

  <amp-img on="tap:AMP.setState({ productId: 0})"
    src="/img/red_apple_1_60x40.jpg"
    width="60"
    height="40"
    role="button"
    tabindex="0">
  </amp-img>
  <amp-img on="tap:AMP.setState({ productId: 1})"
    src="/img/green_apple_1_60x40.jpg"
    width="60"
    height="40"
    role="button"
    tabindex="0">
  </amp-img>
  <amp-img on="tap:AMP.setState({ productId: 2})"
    src="/img/product1_alt1_60x40.jpg"
    width="60"
    height="40"
    role="button"
    tabindex="0">
  </amp-img>
  <div [text]="products[productId] + ' available'">Please select a product</div>