angular - How to use @output to fire a boolean from child to parent -

hi angular community,

i want fire event using @output hide or open/close div containing others components. it's quite simple never use eventemitter before, when hidedem called hide or open/close div depending on other propreties comming child.ts

child.html:

 <img type="button" label="click" (click)="hidedem()" id="foldup" src="./assets/img/fold_up_blacksmall.png"/> 

child.comp.ts:

@output() open: eventemitter<any> = new eventemitter(); @output() close: eventemitter<any> = new eventemitter();  public hidedem(): void {   this.hidemepartially = !this.hidemepartially;   if (this.hidemepartially) {     this.open.emit(true);   } else {     this.close.emit(false);   } } 

parent.comp.html

 <div class="daydetail">  <div><my-daydetail [showmepartially]="showvar" ></my-daydetail></div>   <div [hidden]="(close)=hidedem($event)">     <div>        <app-pie-chart [minifiedme]="hidemeup" ></app-pie-chart>      </div>      <div>        <app-fonctionnaly [minifiedme]="hidemeup"></app-fonctionnaly>      </div>      <div>        <app-my-verticalchart [minifiedme]="hidemeup" ></app-my-verticalchart>      </div>      <div>        <app-dysfonction [showmepartially]="hidevar"></app-dysfonction>      </div>    </div> <!-- end of hidden--> </div> <!-- end of daydetail--> 

[hidden]="(close)=hidedem($event)" 

is invalid markup. (close) can't inside expression of binding.

<my-daydetail [showmepartially]="showvar"      (close)="ishidden = true" (open)="ishidden = false"></my-daydetail>   <div [hidden]="ishidden">