I am trying to call a public function which is inside my directive from component by getting hold of the directive via viewchild like this
@ViewChild('myDirective') myDirective; .... myDirective.nativeElement.myFunction(); But I get error that the myFunction does not exist. Is there a way to call a function which is iniside a directive?
DEMO - How to call Directive's function from Component - check browser's console
import {myDirective} from './Directive'; 2)
@ViewChild(myDirective) vc:myDirective; ///<<<@@@removed '' from ('myDirective') 3)
ngAfterViewInit(){ this.vc.myFunction(); ///<<@@@ no need to use nativeElement } 4) Or some button's click event
click(){ this.vc.myFunction(); } 
Use @ContentChild(). A directive doesn't have a view.
Call this.myDirective.nativeElement.myFunction() in ngAfterContentChecked() to ensure that this.myDirective... is already initialized.
You can use the "exportAs" property of the directive to then get the directive's instance from the decorated component.
For instance:
Create a dummy directive:
import { Directive } from '@angular/core'; @Directive({ standalone: true, selector: '[appDemoDirective]', exportAs: 'aDirective' // add here a name to get the instance later }) export class DemoDirective { aFunction(aParameter: string) { console.log(aParameter); } } You can then get the directive instance using #variableName='aDirective'; i.e. a variable name = the export name you gave above
const template = ` <button appDemoDirective #directiveRef='aDirective' (click)="directiveRef.aFunction(message)">Click me</button> ` @Component({ selector: 'app-root', template: template }) export class AppComponent { public message = "Hello"; } Clicking on button should call the directive's function and print "Hello" in this case
