First, we need to create the directive and inject two things, the
Renderer service. ( In Angular version 4 you will use
The next thing that we need is an
Output. As you may know, you can’t use the dot notation and write something like this:
@Output() click.stop = new EventEmitter();
The dot notation only works with property names which are valid identifier names.
Output takes an optional parameter that specifies the name used when instantiating a component in the template, or in a simple word — an alias.
@Output("click.stop") stopPropEvent = new EventEmitter();
When you pass an alias, it’s like using the bracket notation so you can use any character sequence as a property name.
Note: You can still pass the
$event and any other data to your handler, it’s the same behavior as the original
<button class="child" (click.stop)="fromChild($event, data)"> Click me </button>