tap:AMP.setState not working intermittently

Question

tap:AMP.setState not working at times but it works when i reload the page.

<div class="padTop20">
    <a [class]="model.nextStep.expand ? 'hide' : 'show'" role="button" class="show" on="tap:AMP.setState({model:{nextStep:{expand: true}}})" id="showmore">Show more</a>
    <a [class]="model.nextStep.expand ? 'show' : 'hide'" role="button" class="hide" on="tap:AMP.setState({model:{nextStep:{expand: false}}})" id="showless">Show less</a>
</div>

Here's my default state:

<amp-state id="model">
        <script type="application/json">
            {              
               "nextStep":{  
                  "expand":false
               }
            }
        </script>
    </amp-state>

Is it something because of network that makes it behave like this?? Appreciate for any help! thanks!

Answer 1

You should try;

[class]="(model.nextStep.expand == 'true') ? 'hide' : 'show'"

and

[class]="(model.nextStep.expand == 'false') ? 'show' : 'hide'"

On page load, as soon as the DOM is loaded, your initial state (false) is fired and [class] is rendered because of amp-bind.

You didn't post much in terms of any console errors or validation errors you might be facing with AMP (which will affect the functionality if you did something weird/wrong)