EventEmitter not working in Angular 2
<p>I'm trying to listen to events on a child component from a parent component like <a href="https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#child-to-parent" rel="noreferrer">described here in the angular 2 docs</a> but the event never makes it to the parent.</p>

<p>I know for sure that the code runs through this line in the child that emits the event:</p>

<p><code>this.onResultsRecieved.emit(true);</code></p>

<p>Here is all my code involved:</p>

<p>Parent:</p>

<p>find-page.component.ts</p>

<pre><code>import { Component } from '@angular/core';
import { NavbarComponent } from '../shared/navbar.component';
import { FindFormComponent } from '../find-page/find-form.component';

@Component({
   selector: 'find-page',
   templateUrl: 'app/find-page/find-page.component.html',
   styleUrls: ['app/find-page/find-page.component.css' ],
   directives: [ FindFormComponent ]
})
export class FindPageComponent {
   showResults = false;

     onResultsRecieved(recieved: boolean) {
        if ( recieved ) {
           this.showResults = true;
        }else {
           this.showResults = false;
        }
  }
}
</code></pre>

<p>find-page.component.html:</p>

<pre><code>&lt;div id="find-page"&gt;
   &lt;find-form&gt;&lt;/find-form&gt;
&lt;/div&gt;
&lt;div (onResultsRecieved)="onResultsRecieved($event)" *ngIf="showResults" id="results-page"&gt;
&lt;/div&gt;
</code></pre>

<p>Child:</p>

<pre><code>find-form.component.ts

import { Component, OnInit, ViewChild, ElementRef, EventEmitter, Output } from '@angular/core';
import {  REACTIVE_FORM_DIRECTIVES,
  FormGroup,
  FormBuilder,
  Validators,
  ControlValueAccessor
} from '@angular/forms';
import { ResultService } from '../services/result.service';
import { Result } from '../result'
import { NumberPickerComponent } from './number-picker.component';
import { DistanceUnitsComponent } from './distance-units.component';
import { MapDemoComponent } from '../shared/map-demo.component';
import { AreaComponent } from './area-picker.component';
import { GoComponent } from '../shared/go.component';
import { HighlightDirective } from '../highlight.directive';

@Component({
  selector: 'find-form',
  templateUrl: 'app/find-page/find-form.component.html',
  styleUrls: ['app/find-page/find-form.component.css'],
  providers: [ResultService],
  directives: [REACTIVE_FORM_DIRECTIVES,
    NumberPickerComponent,
    DistanceUnitsComponent,
    MapDemoComponent,
    AreaComponent,
    GoComponent]
})
export class FindFormComponent implements OnInit {
  findForm: FormGroup;
  submitted: boolean; // keep track on whether form is submitted
  events: any[] = []; // use later to display form changes
  @ViewChild('keywordsInput') keywordsInput;
  @Output() onResultsRecieved = new EventEmitter&lt;boolean&gt;();
  results: Result[];

  constructor(private resultService: ResultService,
    private formBuilder: FormBuilder,
    el: ElementRef) { }


  goClicked(): void {
    this.getResults();

  }

  getResults(): void {
    this.results = this.resultService.getResults();
    console.log(this.results);
    this.onResultsRecieved.emit(true);
  }

  ngOnInit() {
    this.findForm = this.formBuilder.group({
      firstname: ['', [Validators.required, Validators.minLength(5)]],
      lastname: ['', Validators.required],
      keywords: [],
      area: ['', Validators.required],
      address: this.formBuilder.group({
        street: [],
        zip: [],
        city: []
      })
    });
    this.findForm.valueChanges.subscribe(data =&gt; console.log('form changes', data));
  }

  focusKeywordsInput() {
    this.keywordsInput.nativeElement.focus();
  }

  save(isValid: boolean) {
    this.submitted = true;
    console.log(isValid);
    console.log(this.findForm);
  }
}
</code></pre>

<p>Why does the event not trigger the onResultsRecieved() function of the parent to execute?</p>

<p>Please note that <a href="https://stackoverflow.com/a/31099959/3935156">this Stack Overflow answer</a> includes <code>events : ['update']</code> on the component but I don't know what that is because it is not in <a href="https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#child-to-parent" rel="noreferrer">the angular component interaction docs</a></p>