title: @Output changing boolean state
body: <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>