title: Angular 4 - @ViewChild component is undefined
body: <p>I have a toast notification component called <code>ToastComponent</code> which I want to call from any other component. I implemented it like this:</p>
  
  <p><code>ToastComponent</code>:</p>
  
  <pre><code>export class ToastComponent implements OnInit {
  
    constructor() {}
  
    showToast() {
      // some code
    }
  }
  </code></pre>
  
  <p><code>app.component.html</code>:</p>
  
  <pre><code>&lt;llqa-main-container&gt;
    &lt;llqa-header&gt;&lt;/llqa-header&gt;
    &lt;div class="content-container"&gt;
      &lt;main class="content-area"&gt;
        &lt;llqa-toast&gt;&lt;/llqa-toast&gt; &lt;!-- ToastComponent which I want to call --&gt;
        &lt;router-outlet&gt;&lt;/router-outlet&gt;
      &lt;/main&gt;
    &lt;/div&gt;
  &lt;/llqa-main-container&gt;
  </code></pre>
  
  <p><code>UserManagementComponent</code> which is inside the <code>&lt;router-outlet&gt;</code>:</p>
  
  <pre><code>export class UserManagementComponent implements OnInit {
  
    @ViewChild(ToastComponent) toast: ToastComponent;
  
    constructor() {}
  
    someSaveMethod() {
      this.toast.showToast() // throws error below
    }
  }
  </code></pre>
  
  <p>On calling the <code>someSaveMethod()</code> method, I'll get the error that <code>toast</code> is undefined.</p>
  
  <p>If I take <code>&lt;llqa-toast&gt;&lt;/llqa-toast&gt;</code>out of the <code>app.component.html</code> and put it on top of the <code>user-management.component.html</code>, it works fine, but then I have to put it in every component. How can I get this to work?</p>