Skip to content

NetanelBasal/ngx-event-modifiers

Repository files navigation

Build Status

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