title: @ViewChild returns undefined
body: <p>For some reason my @ViewChild in my Angular 5 App does not work.
  I have defined it like this in my component:</p>
  <p><strong>case-detail.component.html:</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;inner-tab-content&quot; #innerTabContent&gt;
      &lt;!-- // more content here --&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I have implemented <code>@ViewChild</code> in my controller (above the constructor) like this:</p>
  <p><strong>case-detail.component.ts</strong></p>
  <pre class="lang-js prettyprint-override"><code>@ViewChild('innerTabContent') tabContentElement: ElementRef;
  </code></pre>
  <p>And I want to access it here in the component:
  <strong>case-detail.component.ts</strong></p>
  <pre class="lang-js prettyprint-override"><code>ngAfterViewInit() {
      console.log(&quot;scroll top: &quot; + this.tabContentElement.nativeElement);
  }
  </code></pre>
  <p>I've implemented the <code>AfterViewInit</code> interface. ngAfterViewInit() is called correctly. However, <code>this.tabContentElement</code> is always <code>undefined</code>.</p>
  <p>Any help is greatly appreciated :)</p>