53

I have an element in HTML template of an Angular 2 app. I add a directive to it:

<div myCustomDirective>HELLO</div>

I want that whenever I hover over the div the text inside the div should be changed, but it needs to be done from Directive (mouseover) event.

How to emit an event from a Directive and capture it inside a parent element?

2
  • Why don't you listen in the component itself for mouseover? What is the parent element? Is it the element that contains above HTML in the template? Commented Jun 22, 2016 at 12:25
  • 1
    Yes, that <div> is the parent container. Also I just just want to learn if there is any way to propogate data from Directive -> Parent.
    – raju
    Commented Jun 22, 2016 at 14:47

4 Answers 4

104

If myCustomDirective has an output @Output() someEvent:EventEmitter = new EventEmitter(); then you can use

<div myCustomDirective (someEvent)="callSomethingOnParent($event)">HELLO</div>
4
  • how can i use thus in a <router-outlet > tag?
    – Ajmal Sha
    Commented Jul 13, 2017 at 8:47
  • 3
    You can't. To communicate with components added by the router, use a shared service (ideally with observable to push new events). Commented Jul 13, 2017 at 8:54
  • How to subscribe to the base directive EventEmitter emit in the inherited directive? I try various approaches, but no luck so far..
    – Alexander
    Commented Sep 21, 2022 at 16:56
  • If you know the type, you should be able to inject it into the directive's class and access it there to subscribe. If you don't know the type then you are probably out of luck. There is a very old issue about that, but I think it was closed not too long ago without a solution. Commented Nov 1, 2022 at 15:06
35

I'd like to add to @GünterZöchbauer's answer that if you're trying to emit an event from a structural directive and using an asterisk (*) syntax when applying the directive, it won't work. Angular 5.2.6 still doesn't support @Output binding for structural directives if used with the * syntax (see GitHub issue).

You have to transform it to de-sugarized form (see here), i.e.:

<ng-template [customDirective]="foo" (customDirectiveEvent)="handler($event)">
  <div class="name">{{hero.name}}</div>
</ng-template>

instead of:

<div *customDirective="foo" (customDirectiveEvent)="handler($event)" class="name">{{hero.name}}</div>
4
  • 2
    Also a thanks from me - likely saved me be from a very unproductive afternoon :D
    – MartinJH
    Commented May 23, 2019 at 14:46
  • 2
    Just to mention that event emitters within structural directives still does not work as of angular 7.
    – manojadams
    Commented Jul 27, 2019 at 18:58
  • 2
    event emitters within structural directives still not working in angular 10...
    – hankchiutw
    Commented Jan 19, 2021 at 14:27
  • 2
    Same for Angular 12.
    – alx
    Commented Jun 8, 2021 at 19:45
10

You can also use the use the same name for the directive and the @Output:

@Directive({
  selector: '[myCustomMouseover]'
})
export class MyCustomMouseoverDirective {
  @Output()
  public myCustomMouseover = new EventEmitter<void>();

  @HostListener('mouseover', ['$event'])
  public onMouseover(event: MouseEvent): void {
    if (/* only trigger in certain conditions */) {
       this.myCustomMouseover.emit();
    }
  }
}

And you can use in any element just like:

<div (myCustomMouseover)="handler()">
  ...
</div>
3
  • This is a bad idea. since it's confusing and masks the fact that a template directive is actually applied to an element when reading a template. Instead, it looks like a simple Angular event. Commented Mar 23, 2022 at 22:23
  • 3
    It looks like an elegant solution for me though. So I suppose it depends on personal preferences. Of course, if you name it like dblClick - it might be confusing. But if you name it really like in example above "myCustomMouseover" - it definetely wouldn't be confused with the built-in events. And html got easier to read (no question why there are two attributes instead of one custom). Eventually, whenever one get confused, in WebStorm and VS Code (and also most of other IDEs) it's easy to Cmd+click on the attribute name to go to its definition and see what's behind it.
    – Maxím G.
    Commented Aug 17, 2022 at 20:15
  • Looks good to me. That's why Angular recommends prefixing all selectors you create, like with app for example, so any time you see (appSomeSelector)="onSomeHandler()" you know it is not some built-in directive. There is an ESLint rule for this @angular-eslint/directive-selector.
    – RcoderNY
    Commented Jan 31 at 10:46
0

This is my solution with Angular 13. I plan to create a pagination component so ignore the name.

Directive:

import {Directive, EventEmitter, Input, OnInit, Output, TemplateRef, ViewContainerRef} from '@angular/core';

@Directive({
  selector: '[appPaginate]'
})
export class PaginateDirective implements OnInit {
  @Output() newItemEvent: EventEmitter<string> = new EventEmitter<string>()
  constructor(  private templateRef: TemplateRef<any>,
                private viewContainer: ViewContainerRef) { }

  ngOnInit() {

  }

  @Input() set appPaginate(condition: any) {
    if (condition) {
      this.viewContainer.createEmbeddedView(this.templateRef);
      this.newItemEvent.emit('Directive working')
    }
  }
}

Component.html:

<ng-template [appPaginate]="condition" (newItemEvent)="update($event)">
  <p>{{valueFromDirective}}</p>
</ng-template>

Component.ts

import {Component, Input, OnInit} from '@angular/core';
import {Item} from "./item";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  title = 'tutorial';
  condition = true;
 valueFromDirective = this.title;
  ngOnInit() {
  }

  update($event: any) {
    this.valueFromDirective = $event;

  }
}

enter image description here

Explain

Building on what @Alexander and @Zochbauer's discussion. With <ng-template>, you can define template content that is only being rendered by Angular when you, whether directly or indirectly, specifically instruct it to do so, allowing you to have full control over how and when the content is displayed. Thus when your condition is met you will be required to use this line to display the emitted value onto the html:

this.viewContainer.createEmbeddedView(this.templateRef);

N.B. This is only to help those who think event emitter doesn't work on Angular 7+.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.