• websites

Currency Conversion


This example shows how to use amp-bind to filter JSON data on select of option in select dropdown.


We include amp-bind to track the state

<script async custom-element="amp-bind" src=""></script>


This example uses a public currency endpoint to populate amp-state. The default value is EUR (euro) and we convert the currency values by updating amp-state when the user changes the dropdown to a different currency.


EUR 2.00
<amp-state id="currencyFilter" src=""></amp-state>
<amp-state id="defState">
  <script type="application/json">
      "currencyRate": 1,
      "currencyDecimal": 2,
      "currencyCode": "EUR"
<select on="change:AMP.setState({
              defState: {
                currencyRate: event.value == 'EUR' ? 1 : currencyFilter.rates[event.value], 
                currencyCode: event.value
  <option value="CAD">CAD</option>
  <option value="EUR" selected>EUR</option>
  <option value="HKD">HKD</option>
  <option value="ISK">ISK</option>
  <option value="USD">USD</option>
  <option value="GBP">GBP</option>
  <option value="RUB">RUB</option>
  <option value="INR">INR</option>
    <span [text]="defState.currencyCode">EUR</span>
    <span [text]="(2*defState.currencyRate).toFixed(defState.currencyDecimal)">2.00</span>
  <amp-img src="" height="112" width="112" layout="fixed" title="banana"></amp-img>
Need further explanation?

If the explanations on this page don't cover all of your questions feel free to reach out to other AMP users to discuss your exact use case.

Go to Stack Overflow
An unexplained feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Edit sample on GitHub