Trying to get a dom-if to work

Issue

I am trying to remove and add a template content using the a paper-toggle-button. However, I am not able to see the contents of the template even though the toggle is occurring.

The code used is shown below:

.dart

PolymerRegister( 'test-if-form' )
class TestIfForm extends PolymerElement {
  TestIfForm.created( ) : super.created( );

  @Property( observer: 'togglerChanged' )
  //@property
  bool toggler = false;

  @reflectable
  void toggleNormalChangedEvent( event, [_] ) {
    toggler = !toggler;

    print( 'toggler $toggler' );
  }

  @reflectable
  void togglerChanged( newValue, oldValue ) {
    print( 'new value $newValue' );

    if ( newValue ) {
      toggler = !toggler;
    }
  }
}

.html

<dom-module id = "test-if-form">
  <template>

    <div
        class = "layout horizontal  center-justified"
        id = "normal-changed-toggler-container">
      <span class = "margin-rt-5px">Normal</span>
      <paper-toggle-button
          required
          on-change = "toggleNormalChangedEvent"
          id = "togglerBtn">Changed
      </paper-toggle-button>
      <div>
        <hr>
      </div>
    </div>
    <br>

    <template is = "dom-if"
              if = "{{toggler}}"
              restamp>
      <div>I am now visible</div>
    </template>
  </template>
</dom-module>

The contents of the nested div element is never visible. It does not seem that the if is being called?

Thanks for your help.

Solution

toggler = !toggler;

should be

set('toggler', !toggler);

Answered By – Günter Zöchbauer

Answer Checked By – Dawn Plyler (FlutterFixes Volunteer)