Search code examples
eventstriggersamp-html

AMP Add a class after an event

The only relevant thing I have is the "toggle" event, but nothing related to just add a class when I trigger an event in AMP.

I have a form to submit, and I want to add a class to a father element to change the color of the background so that I can show a different "look" for the success than the form.

How to do that?

Solution 
  • <amp-state id="className">
   <script type="application/json">
    {
         "changeClass": ""
    }
   </script>
</amp-state>

 <p 
   class="beforeclick" 
   [class]="className.changeClass == 'newClass' ? 'afterclick' : 'beforeclick' 
   ">Hello World
 </p>

 <button on="tap:AMP.setState({className:{changeClass: 'newClass'})">Click</button>

    When u click to the button it will look for the changeClass varibale to ClassName state and assign the newClass value to it . And that value will assign to dynamic [class] and change the class value to new value. it is pretty simple.