Allows facets to mutate in response to user actions or data transforms via data binding and easy JS-favor expressions.

You watching: Value amp for E-Commerce Getting Started Product Browse Page Product Page Client-side filtering Conditional State Copy Button Currency Conversion Dynamic Accordion Dynamic Content After User-Interactivity Linked Dropdowns Multi Page Flow Restrict Duplicate Selection Sjust how More Button Tic-Tac-Toe Tic Tac Toe Image Galleries with Animated Snackbar Checkout Flow Hotel Shopping Cart Favorite Button Paged List SeatMap SeatMap Multiple Selection Subscription Settings


The component allows practice stateful interactivity on peras.

For performance, and also to prevent the risk of unsupposed content jumping, does not evaluate expressions on web page pack. This indicates visual facets have to be offered a default state and also not count on for initial render.

Watch this video for an introduction to has three major concepts:

State: A document-scope, mutable JSON state. State variables upday in response to user actions. does not evaluate expressions on page pack. Visual facets need to have actually their default "state" defined and not rely for initial render. Expressions: JavaScript-choose expressions that have the right to referral the state. Bindings: Special characteristics that attach an element"s building to a state through an expression. A building is bound by wrapping it inside brackets, in the create of .

Exhoneychrome.netle without asserted state

Hello World

Say "Hello Interactivity"
< p = "'Hello ' + foo" > Hello World < switch on = "" > Say "Hello Interactivity"
Open this snippet in playground

In the exhoneychrome.netle above:

The state begins as empty. It has actually a solitary binding to , the message content of a node, on the

facet. The worth contains the expression, "Hello " + foo. This expression concatenates the string "Hello " and also the value of the state variable foo.

When the user taps/clicks the button:

It triggers the tap event. The tap occasion invokes the strategy. The approaches sets the foo state variable to the value of Interactivity. The state is no longer empty, so the page updates the bound home to its state.

Calling in some exhoneychrome.netles might set or change claims of other exhoneychrome.netles on page. Refresh this page to see exhoneychrome.netles prior to

Exhoneychrome.netle through claimed state

< head > < style > . greenBorder . redBorder < body > < id = "theFood" > < manuscript kind = "application/json" > , "sushi" : } < div class = "greenBorder" = "" > < p > Each food has a various border color. < p = "'I desire to eat ' + currentMeal + '.'" > I desire to eat cupcakes. < width = "300" height = "200" src = "" = "theFood.imageUrl" > < switch on = "" > Set to sushi < switch on = "" > Set to cupcakes
Open this snippet in playground

In the exhoneychrome.netle above:

The component declares state utilizing JSON. The aspect has actually an id of theFood to enable us to reference the characterized information. But because does not evaluate on web page pack, the state is empty. The web page tons with visual defaults. The
aspect has actually class="greenBorder" defined. The second

aspect has actually "I desire cupcakes." defined within the tags. The src points to a url. Changeable aspects have bindings that point to expressions. The attribute on the

is bound to the expression. The attribute on the second

is bound to the "I want to eat " + currentMeal + "." expression. The attribute is bound to the theFood.imageUrl expression.

If a user clicks the "Set to sushi" button:

The tap occasion create the action. The setState activity turns currentMeal into a state and also sets it to sushi. evaluates bindings via expressions that contain the state currentMeal. ="" updays class to redBorder. =""I desire to eat " + currentMeal + "."" updays the inner text of the second

facet to "I want to eat sushi". ="theFood.imageUrl updates the src of to

Using ="" as an exhoneychrome.netle of expression syntaxes evaluation:

is the property to upday. theFood is the id of the component. currentMeal is the state name. In the instance of theFood it will certainly be cupcakes or sushi. style is the state variable. It coincides to the matching JSON key, and sets the bound home to that key"s worth.


An aspect may contain either a son