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('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?

checkout this as well https://netbasal.com/angular-2-take-advantage-of-the-exportas-property-81374ce24d26#.fxcc4c7vf — Ayyash, Mar 11 '17 at 10:31
This shows how you can do it using a template variable: https://stackoverflow.com/a/36345948/222748 — Michael, May 25 '17 at 06:57

micronyks · Accepted Answer · 2016-11-05T13:50:50.523

27

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

edited Nov 05 '16 at 13:50

answered Nov 05 '16 at 13:25

micronyks

Thanks, this worked with ViewChild and by setting the directive instead of the #myDirective I was using with the ''. But it makes wonder how to accomplish this when using multiple directives. In this case I am only using one directive. – doorman Nov 05 '16 at 13:47
With multiple directives mean how and what???. Ask question and get answer. tell us your scenario and we'll try to resolve it. – micronyks Nov 05 '16 at 13:49
Thanks, what I mean is if you have e.g. from your plunkr
Angular2

Test 3
How would you reference the h3 directive – doorman Nov 05 '16 at 13:52
Could you please ask it as a separate question? – micronyks Nov 05 '16 at 14:13
1

just what i was looking for, awesome find! – TrieuNomad Dec 06 '16 at 00:15
@doorman You could try `@ViewChildren(Type)` instead then call ToArray and access by index. – Michael May 25 '17 at 06:51
1

This seems deprecated. Cannot read property 'callme' of undefined. please see https://stackblitz.com/edit/angular-playground-1di2vk?file=app/app.component.ts – Vincent Aug 16 '18 at 11:51

score 9 · Answer 2 · answered Nov 05 '16 at 12:57

9

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

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

answered Nov 05 '16 at 12:57

2

Thanks for your reply. I changed ViewChild to ContentChild but now myDirective is undefined. Any idea why this could be happening? – doorman Nov 05 '16 at 13:13
Did you find out why? – Karty Nov 12 '17 at 11:58
3

A directive doesn't have a view, it only can have content - the content of it's host element. – Günter Zöchbauer Nov 12 '17 at 12:11
1

with ngAfterContentChecked, check for not null and not undefined using "if (this.vc) {this.vc.myFunction()}" - checked for ng5 & ng6 – Akber Iqbal May 11 '18 at 06:29
1

that should be accept answer. Your solution help me so much. thank alot. – Hiep Tran Nov 18 '18 at 04:04

2 Answers2