Angular: nativeElement is undefined on ViewChild

Question

I want to access the DOM of a component using ViewChild. But when I try to access the nativeElement property, it's undefined.

Below is the snippet.

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { AlertComponent } from './alert.component';

@Component({
    selector: 'app-root',
    template: `
    <app-alert #alert>My alert</app-alert>
      <button (click)="showAlert()">Show Alert</button>`
})
export class AppComponent implements AfterViewInit {
  @ViewChild('alert') alert;

  showAlert() {
    console.log('alert (showalert)', this.alert.nativeElement);
    this.alert.show();
  }

  ngAfterViewInit() {
    console.log('alert (afterviewinit)', this.alert.nativeElement);
  }
}

Please take a look at the plunk.

Günter Zöchbauer · Accepted Answer · 2017-08-28 15:01:57Z

171

If you want to get a reference of an element that hosts a component or directive you need to specify that you want the element instead of the component or directive

@ViewChild('alert', { read: ElementRef }) alert:ElementRef;

See also angular 2 / typescript : get hold of an element in the template

In your case I guess you need two different @ViewChild() one for the component reference to be able to access the show() method, and a 2nd one to be able to access DOM attributes.

Plunker example

edited Aug 28, 2017 at 15:01

answered Aug 28, 2017 at 14:54

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Günter Zöchbauer Over a year ago

If it's a plain HTML element, the default is ElementRef, it it hosts a component or directive, you'll get the component instance by default. You can just use the type name of the component or directive to request a specific one like @ViewChild('alert', { read: AlertComponent }) alert: AlertComponent;

Lahiru Chandima Over a year ago

Works for ViewChildren too

alchi baucha Over a year ago

In angular 8, you have to set the static option (which is now mandatory) to false. @ViewChild('alert', { read: ElementRef, static:false }) Otherwise, it won't work.

Neutrino Over a year ago

Actually {static: false} is the default. It's the {read: ElementRef} that is now required to get it working. Seems like a massively breaking change to have no mention of it whatsoever in the documentation.

lironzaa Over a year ago

new syntax for viewChild signal : textInputComponent = viewChild.required('textInput', { read: ElementRef });

|

Collectives™ on Stack Overflow

Angular: nativeElement is undefined on ViewChild

1 Answer 1

12 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Linked

Related