sanjsanj

<amp-state id="state" [src]="remoteState">
  <script type="application/json">
    {
      "name": "General Leia Organa-Solo"
    }
  </script>
</amp-state>

<h1 [text]="state.name">General Leia Organa-Solo</h1>

sanjsanj

<button
  on="tap:AMP.setState({
      remoteState: 'https://swapi.co/api/people/' + ((random() * 10).toFixed() * 5) + '/?format=json'
    })">
  Random Star Wars Character
</button>

sanjsanj

<amp-bind-macro id="circleArea" arguments="radius" expression="3.14 * radius * radius" />

<div>
  The circle has an area of <span [text]="circleArea(myCircle.radius)">0</span>.
</div>

sanjsanj

<h1 [text]="state.name">Star Wars character name</h1>

sanjsanj

<!-- Hardcoded state -->
<amp-state id="state">
  <script type="application/json">
    {
      "name": "General Leia Organa-Solo"
    }
  </script>
</amp-state>

<!-- State that fetches remote data -->

sanjsanj

<amp-iframe width="600"
  title="Google map pin on Old Street, London UK"
  height="400"
  layout="responsive"
  sandbox="allow-scripts allow-same-origin allow-popups"
  frameborder="0"
  src="https://www.google.com/maps/embed?...">
</amp-iframe>

sanjsanj

<button on="tap:sectionId.toggleVisibility()">Toggle</button>

<section hidden id="sectionId">
  <p>Lorem ipsum...</p>

  <h2 on="tap:AMP.navigateTo(url='https://www.example.com')">Navigate to URL</h2>

  <h3>Scroll to image in milliseconds:</h3>
  <input on="input-debounced:my-image.scrollTo('duration'=event.value)" type="text" />

sanjsanj

<amp-carousel type="slides" height="540" layout="fixed-height">
    
  <amp-video autoplay
    src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
    poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png"
    layout="fill" artwork="img/bigbuckbunny.jpg"
    title="Big Buck Bunny" album="Blender" artist="Blender Foundation"
    controls>
  </amp-video>

sanjsanj

<amp-audio src="https://example.com/audio.mp3"
  artwork="https://example.com/artwork.png"
  title="Example audio" album="Album title" artist="Jane Doe"
  height="50" width="auto" controls>
</amp-audio>

<amp-video autoplay
  src="https://example.com/video.hls"  <!-- HLS video src -->
  poster="https://example.com/poster.png"
  width="720" height="405" layout="responsive" artwork="artwork.jpg"

sanjsanj

<amp-list src="https://swapi.co/api/people/?format=json" items="results" height="800">
  <template type="amp-mustache">
    <div class="grey">
      <h2>{{name}}</h2>

      <!-- #variable is a value so its treated as a conditional -->
      {{#url}}
        <a href="{{url}}">Read more</a>
      {{/url}}