Emit event from Directive to parent element

Question

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

HELLO

I want that

Answer 1

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.:

  
{{hero.name}}

instead of:

{{hero.name}}