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

Question

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>

score 14 · Accepted Answer · answered Dec 15 '17 at 05:47

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;
}

score 5 · Answer 2 · answered Oct 29 '18 at 17:54

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);
  }
}

score 1 · Answer 3 · answered Dec 15 '17 at 05:09

1

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>

answered Dec 15 '17 at 05:09

Sachila Ranawaka

39,756
7
56
80

this will give access to child component not table body which is part of child component – Pranay Rana Dec 15 '17 at 05:12
@thilagabala This answer is not wrong just incomplete. – penleychan Dec 15 '17 at 05:42
@12seconds, correct me if i'm wrong, if i could do the above code, i can get child component methods and binding values instead of DOM. – Jeyabalan Thavamani Dec 15 '17 at 05:52
@thilagabala check my answer, think it answers your question. – penleychan Dec 15 '17 at 05:53

score 0 · Answer 4 · answered Sep 25 '22 at 11:12

just to add here , if you also need to change the DOM element attributes then once you have got access of child component Dom as demonstrated in @penleychan answer. after that just set the color. let parentdiv= this.childComp.tableBody.nativeElement; parentdiv.style.backgroundColor='red';

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

4 Answers4

Linked

Related