ionic framework - What's wrong with this binding? (Angular 2+) -

update 3:

actually found causing initial issue code. if use ionic/angular listener bind button in code - changing variable fro false true - change ui state.

however if use custom listener ('touchstart') though variable changes - not cause ui refresh. think due way angular rendering etc works. wish documented somewhere.

edited code snippet + explanation in code snippet have parent , child components child's emitted event needs change parent components visibility.

edited clarify question better:

in code have simple component (below) , want make these ui rangers appear/disappear dynamically following boolean state of showsliders variable.

i verified getting value updated in variable, guess view reads moment renders or that.

so again see ui not showing when [hidden]="showsliders" (showsliders true here) , vice versa.

but problem - if page has rendered in 1 state, dynamic change of variable not cause ui appear/disapear.

i there easy way achieve that?

in javascript div's id.style.display="none" once boolean value. how can same in angular 2+?

import { component } '@angular/core';  import { navcontroller } 'ionic-angular';  import { childcomponent } '../../components/child/child'    @component({    selector: 'page-home',    templateurl: 'home.html'  })  export class homepage {      public hidden: boolean = false;       constructor(public navctrl: navcontroller) {      }    togglebutton() {      this.hidden = !this.hidden;      console.log(this.hidden);    }      getevent($event) {      console.log($event);      this.hidden = $event;    }  }    // child:    import { component, output, eventemitter } '@angular/core';    @component({    selector: 'child',    template: '<button block ion-button (click)="togglebutton()">hide toggle (child)</button>'  })  export class childcomponent {      @output() onsomeevent = new eventemitter<any>();      boolean: boolean = false;      constructor() {      console.log('hello childcomponent component');    }      togglebutton() {      this.onsomeevent.emit(this.boolean);      console.log("pressed child button")    }    }

// parent view:    <ion-header>    <ion-navbar>      <ion-title>        playground      </ion-title>    </ion-navbar>  </ion-header>    <ion-content>         <ion-item [hidden]="hidden">      <ion-range>        <ion-icon range-left small name="sunny"></ion-icon>        <ion-icon range-right name="sunny"></ion-icon>      </ion-range>    </ion-item>      <button block ion-button (click)="togglebutton()">hide toggle (parent)</button>    <child (onsomeevent)="getevent($event)"></child>    </ion-content>        <ion-footer>      </ion-footer>

you can use *ngif="" structural directive.

<div *ngif="!showsliders">     <div [hidden]="bottompanelstylesstate!=='line'">      <ion-range min="0" max="100%" pin="true" color="secondary" [(ngmodel)]="svgchild.lineslider">        <ion-icon range-left small name="contrast"></ion-icon>        <ion-icon range-right name="contrast"></ion-icon>      </ion-range>    </div>    <div [hidden]="bottompanelstylesstate!=='fill'">      <ion-range min="0%" max="100%" pin="true" color="secondary" [(ngmodel)]="svgchild.fillslider">        <ion-icon range-left small name="moon"></ion-icon>        <ion-icon range-right name="moon"></ion-icon>      </ion-range>    </div>    <div [hidden]="bottompanelstylesstate!=='filter'">      <ion-range min="0%" max="100%" pin="true" color="secondary" [(ngmodel)]="svgchild.filterslider">         <ion-icon range-left small name="leaf"></ion-icon>         <ion-icon range-right name="leaf"></ion-icon>      </ion-range>    </div>  </div>

the difference between [hidden] , *ngif="" that, hidden applies css display:hidden prperty , *ngif="" removes element dom.

here, using [hidden] can cause issues can overwritten. might issue.