Angular 5: Completion and Nav to Declaration on custom directives with binding () or []

I've got some custom directives that take an output for event handling (e.g. for handling mouse enter/leave on an ancestor).   So they have @Output:

@Output() tmHover = new EventEmitter<Event>();
@Input() tmHoverSelector: string;

And can be used as:

<div (tmHover)="handleHoverChange(node, $event)" tmHoverSelector=".ui-treetable-row" >

This compiles and works just fine.  However, IntelliJ doesn't recognize the attribute within the parens: (tmHover).  But if I remove them:

<div tmHover >

then IntelliJ recognizes it just fine:  It highlights it, I can navigate to it (It takes me to the @Directive annotation),  and I can even code-complete (e.g: on "tm"), But this won't actually work, of course. 

Interestingly if I put the selector before it (redundantly), IntelliJ does recognize it, and as far as I can tell, this doesn't cause a problem with angular compile

<div tmHover (tmHover)="handleHoverChange(node, $event)" tmHoverSelector=".ui-treetable-row" >

Is this just a bug, or is there something I need to configure somewhere?


IDEA Info:

IntelliJ IDEA 2017.3.4 (Ultimate Edition)
Build #IU-173.4548.28, built on January 29, 2018

JRE: 1.8.0_152-release-1024-b11 amd64
JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
Windows 7 6.1



Binding work correctly for me:

can yu check if the issue persists after invalidating caches (File | Invalidate caches, Invalidate and restart)? Also, does the other angular stuff work? I.e, are the standard directives, etc. recognized?


Sorry, apparently I can't write a post title.  My post was about directives In spite of what it said in the title (fixed). You are looking at a component, selected, by element name "my-hero-detail", I presume.  I'm guessing that since is not embedded in binding syntax, () or [], it doesn't have that problem.   

That said, I tried invalidating the cache, as you suggest.  It made no difference. 

Standard directives are recognized (e.g. click), sort of.  They don't highlight as identifiers elsewhere, but I can navigate to a core.scripting.rnc. that is in the idea.jar.  


please share a sample project/files i can use to recreate the issue;

may be related to


Create a brand new angular-cli project, then add:

Directive: my-test-directive.ts:

import {AfterViewInit, Directive, EventEmitter, Output} from '@angular/core';
selector: '[appMyTest]'
export class MyTestDirective implements AfterViewInit {
@Output() appMyTest= new EventEmitter<void>();
constructor() { }
ngAfterViewInit() { this.appMyTest.emit(); }

Add this to an app.component.html:

<div (appMyTest)="logme()" ></div>

Add this to app.component.ts, in class AppComponent :

logme() { console.log('here i am')   }

You will find that:

In app.component.html,  on "appMyTest" 

  • IntelliJ does not allow for code completion within the parens (e.g. remove the MyTest from appMyTest, you get: No suggestions).
  • IntelliJ does not navigate to the directive. Ctrl-B goes to the beginning of the div.

In my-test-directive.ts, on MyTestDirective find usages (Ctrl-B, again) does not identify app.component.html as one of the usages.

However, if I add a redundant appMyTest:

<div appMyTest (appMyTest)="logme()" ></div>

then all works as expected However, it is ugly at best and might have some weird results in the template compiler at worst..

Regarding WEB-27874, I do get an autocomplete when typing outside of the parens but the complete gives 


rather than: 


But that's minor.  I'm more concerned about the navigation/usage.  Also, if the directive has another input, without the redundant name, there's a warning: Attribute attributeName is not allowed here.


If you need more, let me know where I can share a project, but this is pretty simple.




thanks for details, logged as Please follow it for updates