Angular – Accessing nativeElement of a component by @ViewChild

angularangular-components

Disclaimer: I just found out that my question is close to being a duplicate of this one: Angular get nested element using directive on parent
The question in itself is not the same, but the accepted answer solves my problem

My Problem: I want to access the property ".nativeElement" of a child-component by using @ViewChild. This question has already been discussed here on SO, but there was no solution that worked for my use-case. I will reference the other questions further down.

This is the html of the parent-component:

<h1>The Title</h1>

<some-child-component #wanted></some-child-component>

<some-other-component></some-other-component>

Now I try to access the #wanted-component like this:

@ViewChild('wanted') myWantedChild: ElementRef;

But I do not get an ElementRef here, I will get the reference to the SomeChildComponent-Instance like is pointed out here in the accepted answer:
How to access the nativeElement of a Component in Angular4?

I can get a hold of the ElementRef in the Childcomponent itself but injecting it in the constructor. But I need the ElementRef in the parent-component.

Accessing the ElementRef of a simple div-block is easy:

<div #wanted>something</div>

Here you get the ElementRef directly by the @ViewChild-Annotation (compare the accepted answer here:What's the proper way of accessing native element in angular2 (2 diff ways) docs are scarce

Now the question for me remains: How can I get the ElementRef of a component that is used as a child-component? My exact use-case is that I want to get the height in pixels of a child-component. As far as I know I need the nativeElement-Reference for that.

EDIT:

I could just expose the ElementRef that I get in the constructor of the child-component as a public property. But that seems a little off…

Best Answer

You need to use read option:

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

Related Solutions

Angular – How to select an element in a component template

Instead of injecting ElementRef and using querySelector or similar from there, a declarative way can be used instead to access elements in the view directly:

<input #myname>

@ViewChild('myname') input;

element

ngAfterViewInit() {
  console.log(this.input.nativeElement.value);
}

StackBlitz example

@ViewChild() supports directive or component type as parameter, or the name (string) of a template variable.
@ViewChildren() also supports a list of names as comma separated list (currently no spaces allowed @ViewChildren('var1,var2,var3')).
@ContentChild() and @ContentChildren() do the same but in the light DOM (<ng-content> projected elements).

descendants

@ContentChildren() is the only one that allows to also query for descendants

@ContentChildren(SomeTypeOrVarName, {descendants: true}) someField;

~~{descendants: true} should be the default but is not in 2.0.0 final and it's considered a bug~~
This was fixed in 2.0.1

read

If there are a component and directives the read parameter allows to specify which instance should be returned.

For example ViewContainerRef that is required by dynamically created components instead of the default ElementRef

@ViewChild('myname', { read: ViewContainerRef }) target;

subscribe changes

Even though view children are only set when ngAfterViewInit() is called and content children are only set when ngAfterContentInit() is called, if you want to subscribe to changes of the query result, it should be done in ngOnInit()

https://github.com/angular/angular/issues/9689#issuecomment-229247134

@ViewChildren(SomeType) viewChildren;
@ContentChildren(SomeType) contentChildren;

ngOnInit() {
  this.viewChildren.changes.subscribe(changes => console.log(changes));
  this.contentChildren.changes.subscribe(changes => console.log(changes));
}

direct DOM access

can only query DOM elements, but not components or directive instances:

export class MyComponent {
  constructor(private elRef:ElementRef) {}
  ngAfterViewInit() {
    var div = this.elRef.nativeElement.querySelector('div');
    console.log(div);
  }

  // for transcluded content
  ngAfterContentInit() {
    var div = this.elRef.nativeElement.querySelector('div');
    console.log(div);
  }
}

get arbitrary projected content

See Access transcluded content

Angular 2 @ViewChild annotation returns undefined

I had a similar issue and thought I'd post in case someone else made the same mistake. First, one thing to consider is AfterViewInit; you need to wait for the view to be initialized before you can access your @ViewChild. However, my @ViewChild was still returning null. The problem was my *ngIf. The *ngIf directive was killing my controls component so I couldn't reference it.

import {Component, ViewChild, OnInit, AfterViewInit} from 'angular2/core';
import {ControlsComponent} from './controls/controls.component';
import {SlideshowComponent} from './slideshow/slideshow.component';

@Component({
    selector: 'app',
    template:  `
        <controls *ngIf="controlsOn"></controls>
        <slideshow (mousemove)="onMouseMove()"></slideshow>
    `,
    directives: [SlideshowComponent, ControlsComponent]
})

export class AppComponent {
    @ViewChild(ControlsComponent) controls:ControlsComponent;

    controlsOn:boolean = false;

    ngOnInit() {
        console.log('on init', this.controls);
        // this returns undefined
    }

    ngAfterViewInit() {
        console.log('on after view init', this.controls);
        // this returns null
    }

    onMouseMove(event) {
         this.controls.show();
         // throws an error because controls is null
    }
}

Hope that helps.

EDIT
As mentioned by @Ashg below, a solution is to use @ViewChildren instead of @ViewChild.

Best Answer

Related Solutions

Angular – How to select an element in a component template

Angular 2 @ViewChild annotation returns undefined

Related Topic