How to change/update CSS class dynamically using amp-bind in Google AMP ?

 

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. You can use amp-bind to change the text dynamically on user interaction with the page.

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

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<script async custom-element="amp-bind"
</script>

chevron_right


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



  1. 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.
  2. Expression: They are like JavaScript expressions used to refer to the state.
  3. Binding: They are a special attribute that is used to link an element’s property to a state via an expression.

To change the image’s class we will make use of [class] attribute, it helps to change the class dynamically.

Example:

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!doctype html>
<html amp>
  
<head>
    <meta charset="utf-8">
    <title>Google AMP amp-bind</title>
  
    <link rel="canonical" href=
  
    <meta name="viewport" content=
"width=device-width,minimum-scale=1,initial-scale=1">
  
    <script async src=
    </script>
  
    <script async custom-element="amp-bind" 
    </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;
        }
  
        .gfg {
            border: 5px solid crimson;
        }
    </style>
</head>
  
<body>
    <center>
        <h1>
            Geeks For Geeks
        </h1>
  
        <div style="padding: 1em;">
  
            <amp-img src=
                width="150"
                height="150" [class]="border">
            </amp-img>
            <br>
            <button on="tap:AMP.setState({
                        border: 'gfg'
                      })">
                Change Class
            </button>
        </div>
    </center>
</body>
  
</html>

chevron_right


Output:

Initially, the image has no class but when the button is hit, its class is updated to gfg which has a border attribute thus a border appears on the screen around the image.




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.