title: Ionic 2 - How to reach a component from inside a directive?
body: <p>I'm trying to build a directive to display a custom numpad when 
  the control (input) on which the directive is applied is clicked.
  I'm Working on Ionic 2 RC5.</p>
  
  <p>myPage.html</p>
  
  <blockquote>
  <pre><code>&lt;ion-content&gt;
    &lt;ion-item&gt;
        &lt;ion-label stacked&gt;Label&lt;/ion-label&gt;
        &lt;ion-input dirNumpad type="text" [(ngModel)]="myField"&gt;&lt;/ion-input&gt;
    &lt;/ion-item&gt;
  &lt;/ion-content&gt;
  &lt;ion-footer&gt;
    &lt;numpad #idNumpad hidden&gt;&lt;/numpad&gt;
  &lt;/ion-footer&gt;
  </code></pre>
  </blockquote>
  
  <p>The Numpad component is in the DOM, at the bottom of the page.</p>
  
  <p>dirNumpad.ts</p>
  
  <blockquote>
  <pre><code>import { Directive, ElementRef, ViewChild } from '@angular/core';
  import { Numpad } from '../../components/numpad/numpad';
  @Directive({
    selector: '[dirNumpad]',            // Attribute selector
    host: {
        '(click)':          'onClick()'
    }
  })
  export class DirNumpad {
    @ViewChild('idNumpad') numpad: Numpad;
    constructor( private el:    ElementRef ) {
    }
    onClick() {
        this.showNumpad();
    }
    showNumpad() {
        console.log(this.numpad);   =&gt; undefined
        this.numpad.show();     =&gt; error: show property does not exist on undefined
    }
  }
  </code></pre>
  </blockquote>
  
  <p>numpad.html</p>
  
  <blockquote>
    <p><code>&lt;div class="numpad" style="position:absolute; top:auto; left:0;
    right:0; bottom:0; height:150px;"&gt;My Numpad&lt;/div&gt;</code></p>
  </blockquote>
  
  <p>numpad.ts</p>
  
  <blockquote>
  <pre><code>import { Component, Input } from '@angular/core';
  @Component({
    selector: 'numpad',
    templateUrl: 'numpad.html'
  })
  export class Numpad {
    constructor() {}
  }
  </code></pre>
  </blockquote>
  
  <p>My problem: I can not reach the numpad component from inside the directive through ViewChild.
  console.log(this.numpad) always returns "undefined"!
  I need it to show the numpad only if user clicks on the input on which the directive is applied...</p>
  
  <p>What am I doing wrong?
  I'm stucked with this problem, so any help will be appreciated.</p>