@Output changing boolean state
<p>I am trying to change the state of a boolean from child to parent. This is what I have so far.</p>

<p><strong>child Component</strong></p>

<pre><code>@Input() state: boolean;
  @Output() show = new EventEmitter();
  @Output() hide = new EventEmitter();


   onHover() {
    this.state = true;
    this.show.emit(this.state);
    console.log("state is " + this.state);


  }
  onHoverOut() {
    this.state = false;
    this.hide.emit(this.state);
    console.log("state is " + this.state);

}
</code></pre>

<p><strong>child.html</strong></p>

<pre><code>&lt;a (mouseover)="onHover(show.state)" (mouseleave)="onHoverOut(hide.state)"&gt;random Link&lt;/a&gt;
</code></pre>

<p><strong>parent Component</strong></p>

<pre><code>@Component({
   selector: 'my-app',
   template: '&lt;h3 (show)="toggleState" (hide)="toggleState"&gt;toggle state: {{boolshow}}&lt;/h3&gt;',
})
export class AppComponent {
     toggleState: boolean;
     boolshow = this.toggleState;
}
</code></pre>

<p>I am not seeing {{boolshow}} changing when I am hovering over the link. any help would be great, thank you.</p>