Trying to get a dom-if to work


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:


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

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

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

    print( 'toggler $toggler' );

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

    if ( newValue ) {
      toggler = !toggler;


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

        class = "layout horizontal  center-justified"
        id = "normal-changed-toggler-container">
      <span class = "margin-rt-5px">Normal</span>
          on-change = "toggleNormalChangedEvent"
          id = "togglerBtn">Changed

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

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

Thanks for your help.


toggler = !toggler;

should be

set('toggler', !toggler);

Answered By – Günter Zöchbauer

Answer Checked By – Dawn Plyler (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *