title: Angular 2: emitter listener between components
body: <p>I am making a 'skip to content' link. The link is in <strong>app.component</strong> and the content is in <strong>login.component</strong>, along with the target.</p>
  
  <p>I've tried <a href="https://stackoverflow.com/questions/45421515/why-is-document-null">several methods</a>, none of which worked out. So now I'm trying emitter/listener:</p>
  
  <pre><code>app.component (emitter):
  
  import { Component, Output, EventEmitter} from '@angular/core';
  
  export class AppComponent {
  
      @Output() skipToCtrl: EventEmitter&lt;any&gt; = new EventEmitter();
  
      skipLink() {
          this.skipToCtrl.emit();
      }
  }
  
  &lt;a href="#content-start" (click)="skipLink()"&gt;Skip to main content&lt;/a&gt;
  </code></pre>
  
  <p>login.component (listener):</p>
  
  <pre><code>&lt;input type="text" #firstControl name="username" /&gt;
  </code></pre>
  
  <p>Don't know how login can subscribe to the event from within login. I keep finding articles that say <strong>not</strong> to do it <a href="https://stackoverflow.com/questions/31131490/how-to-subscribe-to-an-event-on-a-service-in-angular2">How to subscribe to an event on a service in Angular2?</a> but no articles that describe  how to do it.</p>