AMP: Building Accelerated Mobile Pages

Data-binding: linking expressions to element state

The final part of amp-bind is data-binding. This allows us to link expressions to the state of HTML and AMP-HTML elements in an AMP page. When the expression evaluates and produces a new value, then the state of any element to which it is bound is updated.

Data-bindings are made to element state with square bracket syntax on the attribute or property that is being bound, like this:

<element [property]="expression" ...>

There are four types of element state that expressions can be bound to:

• Text nodes: [text]
• CSS classes: [class]
• Element size attributes: [width], [height]
• Whitelisted element attributes: [attr], for example [src] for amp-img, and [slide] for amp-carousel elements (see Appendix ...