Emit event from Directive to parent element

angular angular-directive
raju picture raju · Jun 22, 2016 · Viewed 36.7k times · Source

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?

Answer

G&#252;nter Z&#246;chbauer picture Günter Zöchbauer · Jun 22, 2016

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

<div myCustomDirective (someEvent)="callSomethingOnParent($event)">HELLO</div>

Related questions

is there any alternative for ng-disabled in angular2?

I am using angular2 for development and was wondering if there is any alternative for ng-disabled in angular2. For ex. below code is in angularJS: <button ng-disabled="!nextLibAvailable" ng-click="showNext('library')" class=" btn btn-info btn-xs" title="Next Lib >&…

Read More
How to extend / inherit components?

I would like to create extensions for some components already deployed in Angular 2, without having to rewrite them almost completely, as the base component could undergo changes and wish these changes were also reflected in its derived components. I created …

Read More
Get Value From Select Option in Angular 4

How do I get the value from the select option in Angular 4? I want to assign it to a new variable in the component.ts file. I've tried this but outputs nothing. Can you also do it using [(ngModel)]? component.…

Read More