title: How to pass child output to app component containing router-outlet in Angular
body: <p>I wanna emit a value from a sub component up to the app component. The component structure is like this:</p>
  
  <p>index.html:</p>
  
  <pre><code>&lt;app-root&gt;&lt;/app-root&gt;
  </code></pre>
  
  <p>app.component.html:</p>
  
  <pre><code>&lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>app.component.ts:</p>
  
  <pre><code>@Component({
    selector: 'app-root',
    ...
  })
  
  export class AppComponent implements OnInit {
  
    change = false;
  
    ...
  
    getStatus(value: boolean): void {
      this.change = value;
    }
  
  ...
  }
  </code></pre>
  
  <p>child.component.ts (gets rendered via the router outlet e.g. from URL like /child):</p>
  
  <pre><code>@Component({
    selector: 'app-child',
    ...
  })
  
  export class ChildComponent implements OnInit {
  
    @Output() doStuff: EventEmitter&lt;boolean&gt; = new EventEmitter&lt;boolean&gt;();
  
    ...
  
    emitStuff(): void {
      this.doStuff.emit(true);
    }
  }
  </code></pre>
  
  <p>child.component.html:</p>
  
  <pre><code>&lt;a (click)="emitStuff()"&gt;Click&lt;/a&gt;
  </code></pre>
  
  <p>Now, where should I attach the <code>(doStuff)="getStatus()</code> binding?</p>
  
  <p>Normally in the <code>&lt;app-child (doStuff)="getStatus()"&gt;</code>, but this is not available like e.g. in a static app.component.html where somewhere the <code>&lt;app-child&gt;&lt;/app-child&gt;</code> selector is written. I just don't get it, sorry ;)</p>