How to reach a component from inside a directive?

Ionic Framework ionic-v3
1

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

myPage.html

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

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

dirNumpad.ts

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);	=> undefined
		this.numpad.show();		=> error: show property does not exist on undefined
	}
}

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

numpad.ts

import { Component, Input } from '@angular/core';
@Component({
  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.