title: Unable to catch event emitted from child component in Angular 4
body: <p>I am sorry for my newbie question, I am trying to emit an event from a child to a parent component using an <code>@Output</code> <code>EventEmitter</code>. I am unable to catch the event in my parent component.</p>
  
  <p><strong><em>Child Component</em></strong></p>
  
  <pre><code>@Component({
    selector: 'app-new-attachment',
    templateUrl: './new-attachment.component.html',
    styleUrls: ['./new-attachment.component.css']
  })
  class NewAttachmentComponent {
    @Input('attachment') attachment: any;
    @Output() doneEditingAttachment:EventEmitter&lt;boolean&gt; = new EventEmitter&lt;boolean&gt;();
  
    submit() {
      console.log('done editing child');
      this.doneEditingAttachment.emit(true);
    }
  }
  </code></pre>
  
  <p><strong><em>Parent Component</em></strong></p>
  
  <pre><code>@Component({
    selector: 'app-new-article',
    templateUrl: './new-article.component.html',
    styleUrls: ['./new-article.component.css']
  })
  class NewArticleComponent {
     newAttachment: any = {};
     doneEditingAttachment($event) {
       console.log('done editing parent ', $event);
     }
  }
  </code></pre>
  
  <p>I expected to have </p>
  
  <blockquote>
    <p>done editing child</p>
  </blockquote>
  
  <p>And a </p>
  
  <blockquote>
    <p>done editing parent</p>
  </blockquote>
  
  <p>But I only got <em>done editing child</em></p>