Angular2: get elementref on child component from parent

Question

I'm trying the get an ElementRef for a child component from its parent component.

@Component({
moduleId: module.id,
selector: 'parent',
templateUrl: 'parent.component.html',
directives: [
  Child1Component,
  Child2Component
  ]
})

In the html for Child1Component I have

  <button class="btn btn-primary" #myRef>Select File</button>

In the class for the parent:

export class ParentComponent implements OnInit {
  @ViewChild('myRef') myRef: ElementRef;
  // ...

But of course when I try to access the child ElementRef in the parent class...

ngAfterViewInit() {
  console.log(this.myRef.nativeElement);

...I get undefined. How should I get the ElementRef? Thanks!

I'm not aware of any way for a parent component to be able to reference a local template variable defined in a child component template. Consider having the parent get a reference to the child component using @ViewChild, then you can call a method on the child component to manipulate the element of interest. — Mark Rajcok
– Mark Rajcok, Commented May 20, 2016 at 14:47

delashum · Accepted Answer · 2019-07-09 03:47:42Z

6

You can now do this.

@ViewChild('myRef', {read: ElementRef}) myRef: ElementRef

By default Angular will grab the component reference if your template reference variable is attached to a custom component. The read option tells angular which token to pull, so you can explicitly tell it to pull the ElementRef token instead of the class instance of whatever component you are trying to read.

answered Jul 9, 2019 at 3:47

delashum

8218 silver badges17 bronze badges

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

Comments

Eneko · Accepted Answer · 2022-11-10 17:11:52Z

2

In my case I needed

@ViewChild('myRef', { static: true, read: ElementRef }) myRef!: ElementRef

answered Nov 10, 2022 at 17:11

Eneko

2,1851 gold badge23 silver badges30 bronze badges

Comments

EltonFaust · Accepted Answer · 2017-05-23 19:46:18Z

0

try using ContentChild instead of ViewChild

import { Component, ContentChild, ElementRef, OnInit } from '@angular/core';
...

export class ParentComponent implements OnInit {
  @ContentChild('myRef') myRef: ElementRef;
  // ...

  ngAfterViewInit() {
    console.log(this.myRef.nativeElement);
  }

}

answered May 23, 2017 at 19:46

EltonFaust

34 bronze badges

1 Comment

Hovercraft Full Of Eels Over a year ago

@chris_r: That last comment of yours in your recently deleted question was completely uncalled for and is the sort of comment that can get you banned from this site. Moderators have been notified of your behavior.

Collectives™ on Stack Overflow

Angular2: get elementref on child component from parent

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related