title: How to Output() events from components in ng2 submodules?
body: <p>I have two components with very simple output event and handler, trying to pass a value from a child submodule to a component in my <code>app.module</code>. Here is my <strong>app.component.ts</strong></p>
  
  <pre><code>@Component({
    selector: 'my-app',
    template: `
    &lt;sidebar *ngIf="showHeader" (everySecond)="everySecond()" &gt;&lt;/sidebar&gt;
    &lt;navbar *ngIf="showHeader" (toggleNav)="toggleNav($event)"&gt;&lt;/navbar&gt;
    &lt;router-outlet&gt;&lt;/router-outlet&gt;`,
    directives: [homeComponent, sidebarComponent, navbarComponent]
  })
  export class AppComponent {
    everySecond() { console.log('second'); }
  }
  </code></pre>
  
  <p>In my <strong>app.module.ts</strong> I import <code>tutorialModule</code> which includes the following component.</p>
  
  <pre><code>export class tutorialComponent {
    @Output() everySecond = new EventEmitter();
  
    constructor() {
      this.everySecond.emit("event");
      console.log("here");
    }
  }
  </code></pre>
  
  <p>However, when I route to the <code>tutorialComponent</code>, the "here2 log is printed out, but the "second" one is never triggered. I assume this is because the tutorialComponent isn't declared as a directive of the app.component (as it is imported as a module). How do I get this to work?</p>