title: Angular 7 problem with listening event on parent component
body: <p>I am new to angular and I am struggling with receiving events in parent component. I know that this problem has been discussed before, but somehow none of the tips or the tutorials I have read could help me understand what I am doing wrong...</p>
  
  <p>In my child component.ts I do something like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>import { Component, EventEmitter, OnInit, Output } from '@angular/core'
  
  @Component({
    selector: 'app-test',
    templateUrl: './test.component.html',
    styleUrls: ['./test.component.css'],
    template: `&lt;button class='btn btn-primary' (click)="nameChanged()"&gt;Click me&lt;/button&gt; `
  })
  export class TestComponent implements OnInit {
  
      @Output() onTestEvent = new EventEmitter&lt;string&gt;()
      public text: string = "blah";
  
    constructor() { }
  
    ngOnInit() {
    }
  
    nameChanged() {
      console.log('Sending test event!');
      this.onTestEvent.emit(this.text)
    }
  }
  
  </code></pre>
  
  <p>On my parent component html file I do something like this:</p>
  
  <pre class="lang-html prettyprint-override"><code>  &lt;app-test&gt;
      (onTestEvent)="handleTestEvent($event)"
    &lt;/app-test&gt;
  
  </code></pre>
  
  <p>On my parent component ts file I do something like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>  handleTestEvent(text: string) {
      console.log('handling test event....');
    }
  </code></pre>
  
  <p>I can see that the nameChanged function is called when I press the button, but I don't receive the event in the parent component for some reason that is beyond me...</p>