title: Access router outlet component from parent
body: <p>I have the following app root:</p>
  
  <pre><code>@Component({
      selector: 'my-app',
      providers: [],
      templateUrl: `&lt;button (click)="callChildFunction()"&gt;Close&lt;/button&gt;
                    &lt;router-outlet&gt;&lt;/router-outlet&gt;`
  })
  export class AppComponent {
  
      constructor() {
  
      }
  
      callChildFunction(){
          // Call myFunction() here
      }
  
  }
  </code></pre>
  
  <p>And here is my child (component used in the <code>router-outlet</code>):</p>
  
  <pre><code>@Component({
      selector: 'child',
      providers: [],
      templateUrl: `&lt;div&gt;Hello World&lt;/div&gt;`
  })
  export class ChildComponent {
  
      constructor() {
  
      }
  
      myFunction(){
          console.log('success');
      }
  
  }
  </code></pre>
  
  <p>I have discovered that I can use <a href="https://angular.io/api/router/RouterOutlet" rel="noreferrer">RouterOutlet</a> to get the component functions but it doesn't seem accessible from within the app root.</p>
  
  <p>How can I call <code>myFunction()</code> from the app root?</p>