Changing text with <amp-bind>

In this example, we'll see how to change paragraph text by pressing a button. First, we'll use a paragraph element <p> with some default text:

<p>Hello World</p>

Next, we'll bind the text node of the p element to a simple expression:

<p [text]="'Hello '+username">Hello World</p>

The expression here is a string concatenation: 'Hello '+username. The binding is created with [text]=....

Now let's add the button. We'll use the tap event to change the state with AMP.setState():

<button on="tap:AMP.setState({username: 'ruadhan'})">Say hello</button>

Text replacement example with amp-bind (/ch8/amp-bind.html)

When the ...

Get AMP: Building Accelerated Mobile Pages now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.