title: Child views and event listeners in Angular2
body: <p>How to listen events from child template inside a child component when they are called from parent template?</p>
  
  <p>I have 2 components: app.ts and child.ts;</p>
  
  <p><em>app.ts:</em> </p>
  
  <pre><code>@Component({
      selector: 'app',
      template: '&lt;button&gt;Main button&lt;/buton&gt;&lt;router-outlet&gt;&lt;/router-outlet&gt;',
      encapsulation: ViewEncapsulation.None,
      directives: [ROUTER_DIRECTIVES],
  })
  @RouteConfig([
      {path: '/child/', component: ChildCmp, as: 'Child'}
  ])
  export class AppCmp {
  }
  </code></pre>
  
  <p><em>child.ts:</em> </p>
  
  <pre><code>@Component({
      selector: 'child',
      template: 'This is child page!'
  })
  export class AppCmp {
  
      // This method should be called, when mail button is pressed
      onChange() {
      }
  }
  </code></pre>
  
  <p>I don't want to add click event to button, instead I would like to add some kind of listener for onChange function in child component so it listens when button in parent view is clicked. I've tried with HostListener, but it only triggers, when HostListener is added to parent component.</p>