title: Cannot call function from viewChild element in Angular 4
body: <p>I am trying to trigger a click event programmatically using <code>@ViewChild</code> to call a function called open() I always get the error</p>
  
  <p><code>Cannot read property 'close' of undefined</code></p>
  
  <p>// Component</p>
  
  <pre><code>import {Component, OnInit, OnChanges, ViewChild, ElementRef} from '@angular/core';
  
  export class CalendarComponent implements OnInit {
  
      // Material Design Float Button 
      // https://github.com/GustavoCostaW/ngc-float-button
      ngcFloatButtonData: Object = {
          direction: 'up',
          open:false,
          onToggle: function(): void {
              this.open = !this.open;
          },
          close: function(): void {
              this.open = false;
          }
      };
  
      public elementRef;
      @ViewChild('float-button') public floatButton: ElementRef;
  
      constructor(
        public dialog: MatDialog,
        public el: ElementRef,
      ) {
  
      }
  
     decrement(): void {
        // try to call the function close()
        this.floatButton.close();
     }
  
  } // end
  </code></pre>
  
  <p>// the component html</p>
  
  <pre><code> &lt;ngc-float-button
          id="float-button"
          icon="add"
          color="#c0392b"
          class="ngc-float-button-container ngc-float-button-main-button"
          (click)="ngcFloatButtonData.onToggle()"
          [direction]="ngcFloatButtonData.direction"&gt;
  </code></pre>