Emit event from Directive to parent element
If myCustomDirective has an output @Output() someEvent:EventEmitter = new EventEmitter(); then you can use
<div myCustomDirective (someEvent)="callSomethingOnParent($event)">HELLO</div>
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>