How to change/update image 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.
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.
- Binding: They are a special attribute that is used to link an element’s property to a state via an expression.
When New Logo button was hit, image and border color both got dynamically changed. When we hit Old Logo button image and border color changed to the previous combination.