title: How to access child component from parent component in Angular?
body: <p>I have <code>mat-paginator</code> in a child component a shown below:</p>
  <br/>
  <p><em><strong>child.component.html</strong></em></p>
  <pre><code>&lt;mat-paginator #paginator&gt;&lt;/mat-paginator&gt;
  </code></pre>
  <p>I want to get this paginator from parent component using <code>@ViewChild()</code> as shown below:</p>
  <br/>
  <p><em><strong>parent.component.html</strong></em></p>
  <pre><code>&lt;child 
      &lt;!-- code omitted for simplicity --&gt;
  &gt;
  &lt;/child&gt;
  </code></pre>
  <br/>
   
  ***parent.component.ts***
    
  <pre><code>@ViewChild('paginator') paginator: MatPaginator;
  
  resetPaginator() {          
      this.paginator.firstPage();
  }
  </code></pre>
  <br/>
  <p>But as <code>this.paginator</code> is undefined, I cannot access paginator in the child component. I am not sure how can I access the paginator from parent. One way maybe using the following approach, but if there is an elegant way I would prefer it. Any idea?</p>
  <pre><code>@ViewChild(ChildComponent) child: ChildComponent;
  </code></pre>