Google AMP amp-bind

Sometimes you want to add custom interactivity to your AMP pages to make your pages look more user-friendly and user calling. Although AMP's pre-built components are limited, so amp-bind is made to overcome this problem. It helps the developer to add custom interactivity to the pages without using AMP's pre-built components.

Setup: To use amp-bind in your page you have to import its script in the header of the document.

HTML

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

The amp-bind of Google AMP comprises three main concepts:

State: State variables are responsible for the update on the page on the basis of user actions. It is very important to define a state variable.
Expression: They are like JavaScript expressions used to refer to the state.
Binding: They are a special attribute that is used to link an element's property to a state via an expression.

Example: Dynamically adding text when the button is clicked.

HTML

<!doctype html>
<html amp>

<head>
    <meta charset="utf-8">
    <title>Google AMP amp-bind</title>
    <link rel="canonical" href=
"https://amp.dev/documentation/examples/components/amp-bind/index.html">

    <meta name="viewport" content=
"width=device-width,minimum-scale=1,initial-scale=1">

    <script async src=
        "https://cdn.ampproject.org/v0.js">
    </script>

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

    <style amp-boilerplate>
        body {
            -webkit-animation: -amp-start 8s 
                steps(1, end) 0s 1 normal both;

            -moz-animation: -amp-start 8s 
                steps(1, end) 0s 1 normal both;

            -ms-animation: -amp-start 8s 
                steps(1, end) 0s 1 normal both;

            animation: -amp-start 8s 
                steps(1, end) 0s 1 normal both;
        }

        @-webkit-keyframes -amp-start {
            from {
                visibility: hidden
            }

            to {
                visibility: visible
            }
        }

        @-moz-keyframes -amp-start {
            from {
                visibility: hidden
            }

            to {
                visibility: visible
            }
        }

        @-ms-keyframes -amp-start {
            from {
                visibility: hidden
            }

            to {
                visibility: visible
            }
        }

        @-o-keyframes -amp-start {
            from {
                visibility: hidden
            }

            to {
                visibility: visible
            }
        }

        @keyframes -amp-start {
            from {
                visibility: hidden
            }

            to {
                visibility: visible
            }
        }
    </style>

    <noscript>
        <style amp-boilerplate>
            body {
                -webkit-animation: none;
                -moz-animation: none;
                -ms-animation: none;
                animation: none
            }
        </style>
    </noscript>
    
    <style amp-custom>
        h1 {
            color: forestgreen;
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>
        Geeks For Geeks
    </h1>

    <div style="padding: 1em;">
        <div hidden [hidden]="hideGreeting" 
            style="color: crimson;">
            Welcome to GeeksForGeeks
        </div>

        <button on=
"tap:AMP.setState({ hideGreeting: false })">
            Click Me!!
        </button>
    </div>
</body>

</html>

Output:

Explanation: When the button is click, the hidden attribute called hideGreeting got updated, as its state updated via AMP.setState() action.

Uses: The amp-bind can be used for various purposes, some of them are:

It can be used to dynamically change the content.
It can be used to dynamically update the image.
It can be used to dynamically change the classes of the element.
It can be used to change the CSS attributes the value of the element.

Output:

Explore