How to call a method defined in a directive applied on multiple components

I need to call a method defined in a directive.
This directive is applied to several components on the same page.


<ion-content padding>
        <ion-label stacked>Input 1</ion-label>
        <ion-input #input1 item-content myDirective [(ngModel)]="data"></ion-input>
        <ion-label stacked>Input 2</ion-label>
        <ion-input #input2 item-content myDirective value="value2"></ion-input>


import { Component, ViewChild } from '@angular/core';
  selector: 'page-home',
  templateUrl: 'home.html'
export class HomePage {
    @ViewChild('input2') input2;
    data: any;
  constructor() { = 'value1';
    ngOnInit() {
        setTimeout(() => {
   = 'value1 (modified)';        <= Change value through model
            this.input2.myMethod('value2 (modified)');  <= Call method defined in myDirective
        }, 4000);


import { Directive, ElementRef
             } from '@angular/core';
  selector: '[myDirective]'
export class MyDirective {
    constructor( private el: ElementRef ) {
    public myMethod( myParam ) {

When myMethod is called from home.ts, I get this error message:

_this.input2.myMethod is not a function

I thought that myDirective was injecting myMethod into the component on which it is applied, but it seems Iā€™m wrong.

How can I call myMethod on #input2 only, from home.ts?

1 Like