title: Angular 2 child component receive ancestor event
body: <p>I have an Angular component that depends on a click event that occurs on the root App component. The child is located in random places inside the <code>&lt;app&gt;</code> component, hence why I didn't list it.</p>
  
  <pre><code>@Component({
     template: '&lt;div&gt;Child!&lt;/div&gt;'
  })
  export class Child {
     constructor () {}
  }
  
  @Component({
     selector: 'app',
     template: '&lt;div (click)=foo()&gt;&lt;/div&gt;'
  })
  export class App {
     rootClickEmitter = new EventEmitter();
     foo () {
        this.rootClickEmitter.emit('bar');
     }
  }
  </code></pre>
  
  <p>How can I have the child component receive the <code>rootClickEmitter</code> event? </p>