AMP
  • websites

Conditional State

Introduction

This snippet demonstrates how to create a simple amp-state with conditions.

Setup

We use amp-bind to create a dynamic amp-state.

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

Basic usage

The charState is set by theAMP.setState block in the input component. We check whether the state of user input has changed by using input-throttled. If the state of input has changed, we check current the number of characters in the input (event.value.length) is. The number of characters determines what charState will be set. The item between the ? question mark and the : colon meets the stated condition. The item after the : colon is given for anything that does not meet the stated condition. It is possible to have multiple conditions within the same AMP.setState block.

When a user types < 10 characters in the input section, they see the message "There are under 10 characters, type more!".

When a user types > 10 characters in the input section, they see the message "You have typed over 10 characters, you can stop now.".

Try typing a few characters into the textbox.

<p [text]="charState">
  Try typing a few characters into the textbox.
</p>
<input type="textbox" on="input-throttled:AMP.setState({
        charState: event.value.length < 10 ?  
          'There are under 10 characters, type more!' : 
          'You have typed over 10 characters, you can stop now.'
        })">
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