title: How to get the child DOM element reference from Parent using angular 4
body: <p>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.</p>
  
  <p>parent.component.html</p>
  
  <pre><code>&lt;child-component&gt;&lt;/child-component&gt;
  </code></pre>
  
  <p>parent.component.ts</p>
  
  <pre class="lang-js prettyprint-override"><code>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
     }
  }
  </code></pre>
  
  <p>child.component.ts</p>
  
  <pre><code>import { Component } from '@angular/core';
  @Component({
    selector: 'child-component',
    templateUrl: './child.component.html'
  })
  export class ChildComponent { 
  }
  </code></pre>
  
  <p>child.component.html</p>
  
  <pre><code>&lt;div&gt;
          &lt;table border="1"&gt;
        &lt;th&gt;Name&lt;/th&gt;
        &lt;th&gt;Age&lt;/th&gt;
        &lt;tbody #tableBody&gt;
          &lt;tr&gt;
           &lt;td&gt;ABCD&lt;/td&gt;
            &lt;td&gt;12&lt;/td&gt;
          &lt;/tr&gt;        
        &lt;/tbody&gt;
          &lt;/table&gt;
  &lt;/div&gt; 
  </code></pre>