How to show price of clicked item in amp-list

Question

I am new to amp and trying to build this page where i would fetch some items from api and then render its response in amp-list. On clicking any of the item from this list, i want to access its price and display it. what should i write in AMP.setState({selectedItemPrice: ????})

here is the body tag code snippet

<amp-list height=200 src="https://amp.gmail.dev/playground/public/ssr_amp_list">
  <template type="amp-mustache">
    <div tabIndex="{{id}}" role="button" class="title" on="tap:AMP.setState({selectedItemPrice: ?????})">{{name}}</div>
  </template>
</amp-list>

<p [text]="selectedItemPrice">This is price of product</p>

I tried to use event object but still couldn't make it work

After some hit and trial i came to know that selectedItemPrice value needs to be set equal to '{{price}}' — Gopal, Jun 12 '19 at 01:08

score 0 · Answer 1 · answered Jul 03 '19 at 21:29

Just about to write up a reply, and noticed you already answered, but as a comment. Yes, you need to put {{price}} instead of ????? in your code so the template injects the price of the current row. Then it works.

<amp-list height=200 src="https://amp.gmail.dev/playground/public/ssr_amp_list">
  <template type="amp-mustache">
    <div tabIndex="{{id}}" role="button" class="title" on="tap:AMP.setState({selectedItemPrice: {{price}} })">{{name}}</div>
  </template>
</amp-list>

How to show price of clicked item in amp-list

1 Answers1