title: Cannot read property of undefined @ViewChild not working Angular 5
body: <p>I'm having a bit of trouble I cant seem to figure out why my <code>@ViewChild</code> isnt working..</p>
  
  <p>Basically I want to call a function in one component from another component so in my <code>sidebar</code> component I have a function called <code>sendData()</code> and I want to be able to call that from a button click in my <code>header</code> component so what Ive done is.. </p>
  
  <p><strong>Sidebar component</strong></p>
  
  <pre><code> import { Component, OnInit, Input, OnChanges, SimpleChanges, AfterViewInit } from '@angular/core';
  
  import * as _ from 'lodash';
  
  
  @Component({
     selector: 'app-sidebar',
     templateUrl: './sidebar.component.html',
     styleUrls: ['./sidebar.component.scss']
  })
  export class SidebarComponent implements OnInit, OnChanges {
  
  constructor(
      private contenfulService: ContentfulService,
      private userService: UserService
  ) { }
  
  ngOnInit() {
  
  }
  
  sendData(){
      ...do something
  }
  }
  </code></pre>
  
  <p><strong>header.component.ts</strong></p>
  
  <pre><code> import { Component, OnInit, Input, ViewChild, EventEmitter } from '@angular/core';
   import { UserService } from '../../../user.service';
   import { SidebarComponent } from '../sidebar/sidebar.component';
  
   @Component({
     selector: 'app-program-header',
     templateUrl: './program-header.component.html',
     styleUrls: ['./program-header.component.scss']
   })
  
   export class ProgramHeaderComponent implements OnInit {
   @ViewChild(SidebarComponent) sidebar;
  
      constructor() { }
  
      ngOnInit() {
  
      }
   }
  </code></pre>
  
  <p><strong>header.component.html</strong></p>
  
  <pre><code>&lt;div (click)="sidebar.sendData()"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>but it isnt working Im getting this error in the console... </p>
  
  <blockquote>
    <p>ERROR TypeError: Cannot read property 'sendData' of undefined</p>
  </blockquote>
  
  <p><em>I have removed code for brevity, so please let me know if there is more information you need</em> </p>
  
  <p>Im not sure what the problem is?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Or if anyone knows another way to call a function from a seperate component let me know</p>
  
  <p>Any help would be appreciated!</p>
  
  <p>Thanks!</p>