Calling function in directive

Question

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(\'myDi         


        

Answer 1

DEMO - How to call Directive's function from Component - check browser's console

---

1) I hope you are importing myDirective directive.

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();
}

Answer 2

Use @ContentChild(). A directive doesn't have a view.

Call this.myDirective.nativeElement.myFunction() in ngAfterContentChecked() to ensure that this.myDirective... is already initialized.