title: ElementRef is undefined
body: <p>I’m working in an angular 6 application. I have a textarea that I’d like to give focus to as soon as the page loads. I’m not able to do so.</p>
  
  <p>Here is what the page looks like:</p>
  
  <pre><code>&lt;div fxLayoutAlign="begin"&gt;
    &lt;button mat-button color="primary" [routerLink]="['/Administration']"&gt;
      &lt;i class="far fa-arrow-alt-circle-left"&gt;&lt;/i&gt; Back to Administration
    &lt;/button&gt;
  &lt;/div&gt;
      &lt;div class="app-loading" *ngIf="_loading"&gt;
        &lt;mat-spinner diameter=100&gt;&lt;/mat-spinner&gt;
      &lt;/div&gt;
      &lt;div *ngIf="!_loading"&gt;
  
      &lt;div class="knowledgeBody"&gt;
  
        &lt;div *ngIf="_mode === 'view'"&gt;
          {{ _knowledgeText }}
          &lt;div fxLayoutAlign="end"&gt;
            &lt;button mat-button (click)="edit_clicked()" disabled="{{ _knowledgeText.trim().length === 0 }}"&gt;
              &lt;i class="fas fa-edit"&gt;&lt;/i&gt; Edit
            &lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div *ngIf="_mode !== 'view'"&gt;
          &lt;textarea matInput [(ngModel)]="_knowledgeText" cdkTextareaAutosize #knowledgeTextarea&gt;
            {{ _knowledgeText }}
          &lt;/textarea&gt;
  
          &lt;div fxLayoutAlign="end"&gt;
            &lt;button mat-button (click)="save_clicked()" disabled="{{ _knowledgeText.trim().length === 0 }}"&gt;
              &lt;i class="fas fa-save"&gt;&lt;/i&gt; Save
            &lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>The textarea of interest is #knowledgeTextarea.</p>
  
  <p>Here’s the component for the page:</p>
  
  <pre><code>@Component({
    selector: 'app-knowledge',
    templateUrl: './knowledge.component.html',
    styleUrls: ['./knowledge.component.scss']
  })
  export class KnowledgeComponent implements OnInit {
  
    private _mode : string;
    private _loading : boolean;
    private _knowledgeId : string;
    private _knowledgeText : string;
    private _description : string;
    private _groupPK : string;
  
    @ViewChild('knowledgeTextarea') knowledgeTextarea : ElementRef;
  
    constructor(private _activatedRoute : ActivatedRoute,
      private _watermelonService : WatermelonService,
      private _logService : LoggingService,
      private _dialog: MatDialog) {
        this._loading = true;
      }
  
    ngOnInit() {
  …
      this.knowledgeTextarea.nativeElement.focus();
  …
    }
  …
  }
  </code></pre>
  
  <p>When I run this, I get the following error:</p>
  
  <pre><code>Cannot read property ‘nativeElement’ of undefined.
  </code></pre>
  
  <p>I’ve read that this can happen when you reference an element on the page using the # identification (#knowledgeTextarea) inside an *ngIf block. So this…</p>
  
  <pre><code>  &lt;div *ngIf="_mode !== 'view'"&gt;
      &lt;textarea matInput [(ngModel)]="_knowledgeText" cdkTextareaAutosize #knowledgeTextarea&gt;
        {{ _knowledgeText }}
      &lt;/textarea&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>…will not work.</p>
  
  <p>But then what is the alternative?</p>
  
  <p>I tried this…</p>
  
  <pre><code>  &lt;div *ngIf="_mode !== 'view'"&gt;
      &lt;textarea matInput [(ngModel)]="_knowledgeText" cdkTextareaAutosize #knowledgeTextarea&gt;
        {{ _knowledgeText }}
      &lt;/textarea&gt;
      {{ knowledgeTextarea.focus() }}
  &lt;/div&gt;
  </code></pre>
  
  <p>…which worked but then I got a ExpressionChangedAfterItHasBeenCheckedError, which JB Nizet told me not to do here: <a href="https://stackoverflow.com/questions/53529454/getting-expressionchangedafterithasbeencheckederror-error">Getting ExpressionChangedAfterItHasBeenCheckedError error</a>.</p>
  
  <p>If there is another way of doing this, please let me know. All I want is to be able to give the textarea focus when the page loads. Any way of accomplishing that would be greatly appreciated. Thanks.</p>