Event Modifiers for Angular Applications (inspired by Vue)

Installation

To install this library, run:

$ npm install ngx-event-modifiers --save

import { EventModifiersModule } from 'ngx-event-modifiers';

@NgModule({
  imports: [
    EventModifiersModule
  ]
})
export class AppModule { }

Usage

• (click.stop) - The click event's propagation will be stopped

  <button (click.stop)="onClick($event, extraData)">Click Me!!</button>

• (click.prevent) - The submit event will no longer reload the page

  <button (click.prevent)="onClick($event, extraData)" type="submit">Click Me!!</button>

• (click.self) - Only trigger handler if event.target is the element itself i.e. not from a child element

  <div (click.self)="onClick($event, extraData)">
    <button>Click Me!!</button>
  </div>

• (click.once) - The click event will be triggered at most once

  <button (click.once)="onClick($event, extraData)">Click Me!!</button>

• (click.outside) - The click event will be triggered only if clicked outside the current element

  <div>
    <button (click.outside)="onClick($event, extraData)">Click Me!!</button>
  </div>

You can also pass [eventOptions]:

  <div (click.self)="onClick($event, extraData)"
       [eventOptions]="{preventDefault: true, stopProp: true}">
     <button>Click Me!!</button>
  </div>

License

MIT © Netanel Basal