• 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.".

<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.'
        })">

• Written by @elisameyer