title: TypeError: Cannot read property 'nativeElement' of undefined with @ViewChild?
body: <p>I'm developing project on <code>Angular-7</code> and using how you can also access your elements directly from the TypeScript file with <code>@ViewChild</code>. But I'm getting below error. It look to me that <code>@ViewChild('serverContentInput', { read: true, static: true }) serverContentInput: ElementRef;</code> <strong>not getting Access to the Template &amp; DOM with @ViewChild</strong></p>
  
  <p><strong>Error:</strong></p>
  
  <pre><code>ERROR TypeError: Cannot read property 'nativeElement' of undefined
      at CockpitComponent.onAddServer (cockpit.component.ts:24)
      at Object.eval [as handleEvent] (CockpitComponent.html:11)
      at handleEvent (core.js:34777)
      at callWithDebugContext (core.js:36395)
      at Object.debugHandleEvent [as handleEvent] (core.js:36031)
      at dispatchEvent (core.js:22519)
      at core.js:33709
      at HTMLButtonElement.&lt;anonymous&gt; (platform-browser.js:1789)
      at ZoneDelegate.invokeTask (zone-evergreen.js:391)
      at Object.onInvokeTask (core.js:30873)
  </code></pre>
  
  <p><strong>cockpit.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit, EventEmitter, Output, ViewChild, ElementRef, Directive } from '@angular/core';
  
  @Component({
    selector: 'app-cockpit',
    templateUrl: './cockpit.component.html',
    styleUrls: ['./cockpit.component.css']
  })
  export class CockpitComponent implements OnInit {
    @Output() serverCreated = new EventEmitter&lt;{ serverName: string, serverContent: string }&gt;();
    @Output('bpCreated') blueprintCreated = new EventEmitter&lt;{ serverName: string, serverContent: string }&gt;();
  
    // newServerName = '';
    // newServerContent = '';
    @ViewChild('serverContentInput', { read: true, static: false }) serverContentInput: ElementRef;
  
    constructor() { }
  
    ngOnInit() {
    }
  
    onAddServer(nameInput: HTMLInputElement) {
      this.serverCreated.emit({
        serverName: nameInput.value,
        serverContent: this.serverContentInput.nativeElement.value
      });
    }
  
    onAddBlueprint(nameInput: HTMLInputElement) {
      this.blueprintCreated.emit({
        serverName: nameInput.value,
        serverContent: this.serverContentInput.nativeElement.value
      });
    }
  }
  </code></pre>
  
  <p><strong>cockpit.component.html</strong></p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="col-xs-12"&gt;
      &lt;p&gt;Add new servers or blueprint !&lt;/p&gt;
      &lt;label&gt;Server Name&lt;/label&gt;
      &lt;!-- &lt;input type="text" class="form-control" [(ngModel)]="newServerName" /&gt; --&gt;
      &lt;input type="text" class="form-control" #serverNameInput /&gt;  &lt;!-- Local Reference --&gt;
      &lt;label&gt;Server Content&lt;/label&gt;
      &lt;!-- &lt;input type="text" class="form-control" [(ngModel)]="newServerContent" /&gt; --&gt;
      &lt;input type="text" class="form-control" #serverContentInput  /&gt;
      &lt;br&gt;
      &lt;button class="btn btn-primary" (click)="onAddServer(serverNameInput)"&gt;Add Server&lt;/button&gt;
      &lt;button class="btn btn-primary" (click)="onAddBlueprint(serverNameInput)"&gt;Add Server Blueprint&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>