title: Angular 2 calling a child component method from the parent
body: <p>I have tried to use different methods suggested in StackOverflow but I cannot make the following work.</p>
  
  <p>I have a nested ChildComponent into a ParentComponent.</p>
  
  <p>Here the HTML of the parent:</p>
  
  <pre><code>&lt;div&gt; ... &lt;div&gt;
  
  &lt;span *ngIf="value" class="option-button cursor-pointer" [attr.modelURL]="value"
        (click)="$event.stopPropagation();getParts(assemblyLibrary)"&gt;
      &lt;i class="fa fa-cube"&gt;&lt;/i&gt;
  &lt;/span&gt;
  
  &lt;child-component&gt;&lt;/child-component&gt;
  </code></pre>
  
  <p>Obviously, I have imported the child component into the parent one:</p>
  
  <pre><code>import { SharedModule } from '../../shared'; //child declaration is inside here
  </code></pre>
  
  <p>in the parent component, I am implementing the following code:</p>
  
  <pre><code>import { child-component } from '../../../child-component';
  
  @Component({
      selector: 'parent-component',
      templateUrl: './parent-component.html',
      changeDetection: ChangeDetectionStrategy.OnPush
  })
  export class ParentComponent implements OnChanges, OnInit {
      ...
  
      @ViewChild('ChildComponent') childComponent;
  
      openDialog(filesToLoad) {
          this.childComponent.openDialog(filesToLoad);
      }
  
      getParts(value) {
          this.filesToLoad = [];
  
          ... code to populate files to load
  
          this.openDialog(this.filesToLoad);
      }}
  }
  </code></pre>
  
  <p>When I call the getParts(value) by clicking on the  declared in my HTML I get the following error:</p>
  
  <blockquote>
    <p>VM21157:55 EXCEPTION: Cannot read property 'openDialog' of undefined</p>
  </blockquote>
  
  <p>what is wrong with this approach suggested by many users?</p>