How to get the child DOM element reference from Parent using angular 4

How to get the child DOM element reference from Parent using angular 4

angular viewchildren
angular 4 get element position
angular viewchild elementref
angular get element by class
angular viewchild undefined
angular elementref
angular 4 get dom element by id
angular get parent element

I need to get the child component DOM reference from parent component using angular 4, but i can't access child component DOM, please guide me how to achieve this.

parent.component.html

<child-component></child-component>

parent.component.ts

import { Component, Input, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'parent-component',
  templateUrl: './parent.component.html'
})
export class ParentComponent implements AfterViewInit {
  @ViewChild('tableBody') tableBody: ElementRef;
  constructor(){
    console.log(this.tableBody);//undefined
  }
  ngAfterViewInit() {
       console.log(this.tableBody);//undefined
   }
}

child.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'child-component',
  templateUrl: './child.component.html'
})
export class ChildComponent { 
}

child.component.html

<div>
        <table border="1">
      <th>Name</th>
      <th>Age</th>
      <tbody #tableBody>
        <tr>
         <td>ABCD</td>
          <td>12</td>
        </tr>        
      </tbody>
        </table>
</div> 

To expand on Sachila Ranawaka answer:

First you need <child-component #childComp></child-component>

In your parent component, instead of ElementRef it should be ChildComponent:

@Component({
  selector: 'parent-component',
  templateUrl: './parent.component.html'
})
export class ParentComponent implements AfterViewInit {
  @ViewChild('childComp') childComp: ChildComponent;
  constructor(){
  }
  ngAfterViewInit() {
    console.log(this.childComp.tableBody);
  }
}

For your child component:

@Component({
  selector: 'child-component',
  templateUrl: './child.component.html'
})
export class ChildComponent { 
  @ViewChild('tableBody') tableBody: ElementRef;
}

How to get the parent DOM element reference of an angular2 , In your child component pass parent in constructor: constructor( Instead have the child emit events and the parent change the properties. Want to get access to a child component, directive or a DOM element from a parent component class? It’s easy to do with the ViewChild decorator. ViewChild returns the first element that matches a given component, directive or template reference selector. In cases where you’d want to access multiple children, you’d use ViewChildren instead.


Adding to Sachila's and penleychan's good answers, you can reference a component with @ViewChild just by its component's name:

parent.component.html

<!-- You don't need to template reference variable on component -->   
<child-component></child-component> 

Then in parent.component.ts

import { ChildComponent } from './child-component-path';

@Component({
  selector: 'parent-component',
  templateUrl: './parent.component.html'
})
export class ParentComponent implements AfterViewInit {
  @ViewChild(ChildComponent) childComp: ChildComponent;
  constructor(){
  }
  ngAfterViewInit() {
    console.log(this.childComp.tableBody);
  }
}

Using ViewChild in Angular to Access a Child Component, Directive , Want to get access to a child component, directive or a DOM element matches a given component, directive or template reference selector. We can then call that method from within our parent component class with ViewChild like this: Building Maps in Angular using Leaflet, Part 4: The Shape Service. I need to access to some properties of the parent DOM element which contains the component from where i want to get the info, is there a way to do such thing? Here is how my component looks like:


Need to reference the tableBody from the parent component. So add it to he child-component and remove it from tbody

<child-component #tableBody></child-component>

Querying the DOM with @ViewChild and @ViewChildren, The @ViewChild decorator is used to query a single DOM element 1 2 3 4 5 6 7 8 9 10 11 12 13 14 import { Component, OnInit, Input } app.component.css"] }) export class AppComponent { name = "Angular"; // Getting the reference We can directly access the property of a child component using the  We’ve added a button to make it easy to play with this example. The @ViewChild decorator can take either a type of component or a selector (string) as argument, and returns the first child element from template that matches it. In this case, since we have a Counter component, we get the reference to actual component object that’s rendered. Clicking the button increases the counter to 124, proving this.


Angular @ViewChild: In-Depth Explanation (All Features Covered), As an example, we have here an Angular AppComponent template of its child components; and neither anything in the template of parent components as well Using @ViewChild to inject a reference to a DOM element. If you wish to gain access to a DOM element, directive or component from a parent component class then you rely on Angular Viewchild. When you run Viewchild in Angular 2, it will return the 1st element that matches. It will match against the template reference selector, directive or component.


Angular ViewChild and ViewChildren - Better Programming, @ViewChild can be used to get the reference of the DOM element 4. Accessing multiple template-reference variables. The selector can be a set of In the template specified for the parent component, we have a child  You can use ViewChildren to get the QueryList of elements or directives from the view DOM. Any time a child element is added, removed, or moved, the query list will be updated, and the changes observable of the query list will emit a new value. Angular 9 ViewChildren by Example. Let's see an example.


Angular 9/8 DOM Queries: ViewChild and ViewChildren Example , In this tutorial, we'll see an Angular 8 example of how to use to use the two decorators. in Angular provide a way to access and manipulate DOM elements, Our Angular 9 project contains the usual App component and a child HTML elements using ViewChild and template reference variables. Let's go  A template reference variable is simply a named reference to a DOM element within a template. You can view it as something similar to the id attribute of an html element. You mark a DOM element with a template reference and then query it inside a class using the ViewChild decorator.