Event Modifiers in Angular

ref: https://netbasal.com/implementing-event-modifiers-in-angular-87e1a07969ce

First, we need to create the directive and inject two things, the ElementRefand the Renderer service. ( In Angular version 4 you will use Renderer2 )

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.

🙏 Fortunately, 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 (click) event.

<button class="child" (click.stop)="fromChild($event, data)">
   Click me

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s