title: Angular: Events and "subscribe is not a function" error
body: <p>I have just started diving into some basic Angular 4 and am stuck listening to an emitted event. Here's a pretty minimal example that reproduces the problem (at least on my end):</p>
  
  <p><code>DateSenderComponent</code> is "broadcasting" the current date which is then to be processed by its parent <code>AppComponent</code> (see below):</p>
  
  <pre><code>import { Component, Output } from '@angular/core';
  import { EventEmitter } from "events";
  
  @Component({
    selector: 'app-date-sender',
    template: '&lt;button (click)="sendDate()"&gt;Send&lt;/button&gt;'
  })
  
  export class DateSenderComponent {
    @Output() dateSent = new EventEmitter();
  
    sendDate(){
      var dt = new Date();
      console.log(dt);
      this.dateSent.emit(dt.toString());
    }
  }
  </code></pre>
  
  <p><code>AppComponent</code> is supposed to listen to the broadcasted date event:</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    template: '&lt;app-date-sender (dateSent)="dateReceived($event)"&gt;&lt;/app-date-sender&gt;'
  })
  
  export class AppComponent {
    dateReceived(value){
      console.log('Result: ', value);
    }
  }
  </code></pre>
  
  <p>From various beginners tutorials I figured this is the way to listen to events. However, instead of printing out the received date value, when loading the page I get the following error:</p>
  
  <blockquote>
    <p>AppComponent.html:1 ERROR TypeError: instance[output.propName].subscribe is not a function</p>
    
    <p>at createDirectiveInstance (core.es5.js:10727)</p>
    
    <p>at createViewNodes (core.es5.js:12086)</p>
    
    <p>at callViewAction (core.es5.js:12530)</p>
    
    <p>at execComponentViewsAction (core.es5.js:12439)</p>
    
    <p>at createViewNodes (core.es5.js:12113)</p>
    
    <p>at createRootView (core.es5.js:11991)</p>
    
    <p>at callWithDebugContext (core.es5.js:13206)</p>
    
    <p>at Object.debugCreateRootView [as createRootView] (core.es5.js:12666)</p>
    
    <p>at ComponentFactory_.create (core.es5.js:9912)</p>
    
    <p>at ComponentFactoryBoundToModule.create (core.es5.js:3448)</p>
  </blockquote>
  
  <p>Unfortunately, I wasn't able to find any information about what this actually means and I also couldn't figure it out on my own.</p>
  
  <p>One thing that seems to be a hint: When I change the <code>AppComponent</code> template to listen to some event that doesn't get emitted anywhere (for example <code>&lt;app-date-sender (someStringSent)="dateReceived($event)"&gt;&lt;/app-date-sender&gt;</code>) then the error disappears. So there seems to be a connection between the actual output event and the template listening to it and it seems to be the cause of the problem.</p>
  
  <p>Can anyone point me in the right direction?</p>