title: @Output event emitter not working
body: <p>I have a child component that emits an event like such...</p>
  
  <pre><code>import { Component, OnInit, Output, EventEmitter } from '@angular/core';
  
  @Component({
      selector: 'app-rate-sort',
      templateUrl: './rate-sort.component.html'
  })
  export class RateSortComponent implements OnInit {
  
      @Output() sort = new EventEmitter&lt;string&gt;();
  
      constructor() { }
  
      ngOnInit() {
      }
  
      sortBy(string) {
          this.sort.emit(string);
      }
  
  }
  </code></pre>
  
  <p>this should be passing the string invoked by a button on the template to the parent like such...</p>
  
  <pre><code>&lt;header class="bg-white"&gt;
      &lt;h4 class="text-primary my-0 mr-3"&gt;Media List Builder&lt;/h4&gt;
      &lt;div class="inner"&gt;
          ...
          &lt;div class="wrapper"&gt;
              &lt;app-rate-sort (onSort)="onSort($event)"&gt;&lt;/app-rate-sort&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="utility"&gt;
          ...
      &lt;/div&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>and then in the parent component, i have a simple method for handling the event...</p>
  
  <pre><code>onSort(event) {
      this.sortKey = event;
      console.log(event);
  }
  </code></pre>
  
  <p>however it seems that the parent is not getting the event, as the output in console is empty.</p>
  
  <p>What am I missing here?</p>