How to reach a component from inside a directive?


I’m trying to build a directive to display a custom numpad when
the control (input) on which the directive is applied is clicked.


		<ion-label stacked>Label</ion-label>
		<ion-input dirNumpad type="text" [(ngModel)]="myField"></ion-input>
	<numpad #idNumpad hidden></numpad>

The Numpad component is in the DOM, at the bottom of the page.


import { Directive, ElementRef, ViewChild } from '@angular/core';
import { Numpad } from '../../components/numpad/numpad';
  selector: '[dirNumpad]', 			// Attribute selector
	host: {
		'(click)': 			'onClick()'
export class DirNumpad {
	@ViewChild('idNumpad') numpad: Numpad;
  constructor( private el: 	ElementRef ) {
	onClick() {
	showNumpad() {
		console.log(this.numpad);	=> undefined;		=> error: show property does not exist on undefined

<div class="numpad" style="position:absolute; top:auto; left:0; right:0; bottom:0; height:150px;">My Numpad</div>


import { Component, Input } from '@angular/core';
  selector: 'numpad',
  templateUrl: 'numpad.html'
export class Numpad {
  constructor() {}

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…

What am I doing wrong?
I’m stucked with this problem, so any help will be appreciated.